Блог

 import React, { useEffect, useState } from "react";
import { toast } from "react-toastify";
const Dashboard = ({ setAuth }) => {


const [name, setName] = useState("");
const [role, setRole] = useState("");




 const getProfile = async () => {
try {
  const res = await fetch("http://localhost:5000/dashboard/", {
    method: "POST",
    headers: { jwt_token: localStorage.token }
  });

  const parseData = await res.json();
  console.log(parseData)
     setRole(parseData.user_role);
  setName(parseData.user_name);
} catch (err) {
  console.error(err.message);
}


};



 const logout = async e => {
e.preventDefault();
try {


localStorage.removeItem("token");
  setAuth(false);
  toast.success("Logout successfully");
} catch (err) {
  console.error(err.message);
}






useEffect(() => {
getProfile();


 }, []);

return (
<div>
<h1 className="mt-5">Dashboard</h1>
  <h2>Welcome {name} as {role}</h2>
<button onClick={e => logout(e)} className="btn btn-primary">
    Logout
  </button>
 </div>
  );
};

export default Dashboard;


  
 

Привет всем,
Пожалуйста, помогите…
Я пытаюсь разработать приложение с простой регистрацией входа.
У меня есть код в функциональном компоненте для регистрации входа в систему, который я опубликовал выше.
Все мои коды приложения основаны на классах (компонентах класса). Не могли бы вы, пожалуйста, помочь мне преобразовать приведенный выше код в
основанный на классе.

Вы можете преобразовать свой функциональный компонент в класс за пять шагов:

1. Создайте класс ES6 с тем же именем, который расширяет React.Компонент.
2. Добавьте конструктор класса, который присваивает начальное this.state (чтобы добавить ваше начальное состояние имени и роли).
3. используйте this.setState для обновления вашего состояния (имя или роль).
4. Добавьте к нему один пустой метод с именем render().
5. Переместите тело «return» внутри функционального компонента в метод render().
6. Замените props на this.props в теле render().
7. вы не можете использовать перехватчики реакции (useEffect, useState ) внутри вашего компонента класса, поэтому вам нужно будет использовать componentDidMount или componentDidUpdate …(в зависимости от ситуации), в вашем случае вам нужно будет использовать componentDidMount, потому что вы извлекаете данные (вызываете getProfile внутри componentDidMount).

вам нужно взглянуть на ссылки ниже, чтобы понять больше об этом и почему вам нужно будет использовать componentDidMount:

https://reactjs.org/docs/state-and-lifecycle.html#converting-a-function-to-a-class
https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/