Reactjs 在react js中转换代码（从函数到类）的初学者 import React，{useffect，useState}来自“React”； 从“react toastify”导入{toast}； const Dashboard=（{setAuth}）=>{ const[name，setName]=useState（“”）； const[role，setRole]=useState（“”）； const getProfile=async（）=>{ 试一试{ const res=等待获取（“http://localhost:5000/dashboard/", { 方法：“张贴”， 标头：{jwt_令牌：localStorage.token} }); const parseData=await res.json（）； console.log（解析数据） setRole（parseData.user\u角色）； setName（parseData.user_name）； }捕捉（错误）{ 控制台错误（错误消息）； } }; 常量注销=异步e=>{ e、 预防默认值（）； 试一试{ localStorage.removietem（“令牌”）； setAuth（假）； toast.success（“成功注销”）； }捕捉（错误）{ 控制台错误（错误消息）； } useffect（（）=>{ getProfile（）； }, []); 返回( 仪表板 欢迎{name}成为{role} 注销（e）}className=“btn btn primary”> 注销 ); }; 导出默认仪表板；

大家好， 请帮忙。。。 我正在尝试开发一个应用程序与一个简单的登录注册。 我在函数组件中有一个用于登录注册的代码，我已经在上面发布了。 我的整个应用程序代码都是基于类的（类组件）。你能帮我把上面的代码转换成英文吗

---

基于类。

您可以通过五个步骤将功能组件转换为类：

创建一个扩展React.Component的同名ES6类

添加分配初始this.state的类构造函数（以添加名称和角色的初始状态）

使用this.setState更新您的状态（名称或角色）

向其中添加一个名为render（）的空方法

将函数组件内的“return”主体移动到render（）方法中

在render（）主体中用this.props替换props

您不能在类组件内使用react钩子（useffect，useState），因此您需要使用ComponentDidMount或componentdiddupdate…（根据情况而定），在您的情况下，您需要使用ComponentDidMount，因为您正在获取数据（在ComponentDidMount内调用getProfile）

您需要查看下面的参考资料以了解更多信息，以及为什么需要使用componentDidMount：

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;