Javascript 如何显示更新的用户值？

class Home扩展组件{
状态={
loadUsers:[]，
当前用户：null，
};
异步组件didmount（）{
const res=等待axios.get（“http://localhost:5000/users");
this.setState（{loadUsers:res.data}）；
}
设置用户=（当前用户）=>{
this.setState（{currentUser}）；
};
render（）{
返回(
列出所有顾问
{this.state.loadUsers.map（（用户）=>{
const{u id，firstname，lastname}=user；
返回(
{
this.setUser（用户）；
}}
>
{firstname}{lastname}
);
})}
{this.state.currentUser&&(
)}
);
}
}
导出默认主页；

这是我的中间面板代码

        const MiddlePanel = ({ user }) => {
        
          const [data, setData] = useState({
        
            firstname: "",
            lastname: "",
            email: "",
            phoneNo: "",
          });
        
          const { firstname, lastname, email, phoneNo } = data;
        
          useEffect(() => {
        
            const fetchUser = async () => {
              const res = await axios.get(`http://localhost:5000/users/${user._id}`);
              setData({
                firstname: res.data.firstname,
                lastname: res.data.lastname,
                email: res.data.email,
                phoneNo: res.data.phoneNo,
              });
      
    
          };
            fetchUser();
          }, [user._id]);
        
          const handleChange = (e) => {
        
            const { name, value } = e.target;
            setData({ ...data, [name]: value });
          };
        
          const handleSubmit = async (e) => {
        
            e.preventDefault();
        
            const newUser = { firstname, lastname, email, phoneNo };
            try {
              const config = {
                headers: {
                  "Content-Type": "application/json",
                },
              };
              const body = JSON.stringify(newUser);
              await axios.patch(
                `http://localhost:5000/users/${user._id}`,
                body,
                config
              );
            } catch (err) {
              console.log(err);
            }
          };
        
          return (
        
            <div>
              <Form onSubmit={handleSubmit}>
                <Input
                  type="text"
                  name="firstname"
                  onChange={handleChange}
                  value={data.firstname}
                />
                <Input
                  type="text"
                  name="lastname"
                  onChange={handleChange}
                  value={data.lastname}
                />
                <Input
                  type="email"
                  name="email"
                  onChange={handleChange}
                  value={data.email}
                />
                <Input
                  type="tel"
                  name="phoneNo"
                  onChange={handleChange}
                  value={data.phoneNo}
                />
                <PrimaryButton>Update</PrimaryButton>
              </Form>
            </div>
          );
        };

constmiddlepanel=（{user}）=>{
const[data，setData]=useState({
名字：“，
姓氏：“，
电邮：“，
电话号码：“，
});
const{firstname，lastname，email，phoneNo}=data；
useffect（（）=>{
const fetchUser=async（）=>{
const res=等待axios.get(`http://localhost:5000/users/${user.\u id}`）；
设置数据({
firstname:res.data.firstname，
lastname:res.data.lastname，
电子邮件：res.data.email，
phoneNo:res.data.phoneNo，
});
};
fetchUser（）；
}，[user._id]）；
常数handleChange=（e）=>{
常量{name，value}=e.target；
setData（{…数据，[名称]：值}）；
};
const handleSubmit=async（e）=>{
e、 预防默认值（）；
const newUser={firstname，lastname，email，phoneNo}；
试一试{
常量配置={
标题：{
“内容类型”：“应用程序/json”，
},
};
const body=JSON.stringify（newUser）；
等待axios补丁(
`http://localhost:5000/users/${user.\u id}`，
身体，
配置
);
}捕捉（错误）{
控制台日志（err）；
}
};
返回(
更新
);
};

---

我想在Middlepanel中显示更新的用户信息，这是我的Middlepanel代码

        const MiddlePanel = ({ user }) => {
        
          const [data, setData] = useState({
        
            firstname: "",
            lastname: "",
            email: "",
            phoneNo: "",
          });
        
          const { firstname, lastname, email, phoneNo } = data;
        
          useEffect(() => {
        
            const fetchUser = async () => {
              const res = await axios.get(`http://localhost:5000/users/${user._id}`);
              setData({
                firstname: res.data.firstname,
                lastname: res.data.lastname,
                email: res.data.email,
                phoneNo: res.data.phoneNo,
              });
      
    
          };
            fetchUser();
          }, [user._id]);
        
          const handleChange = (e) => {
        
            const { name, value } = e.target;
            setData({ ...data, [name]: value });
          };
        
          const handleSubmit = async (e) => {
        
            e.preventDefault();
        
            const newUser = { firstname, lastname, email, phoneNo };
            try {
              const config = {
                headers: {
                  "Content-Type": "application/json",
                },
              };
              const body = JSON.stringify(newUser);
              await axios.patch(
                `http://localhost:5000/users/${user._id}`,
                body,
                config
              );
            } catch (err) {
              console.log(err);
            }
          };
        
          return (
        
            <div>
              <Form onSubmit={handleSubmit}>
                <Input
                  type="text"
                  name="firstname"
                  onChange={handleChange}
                  value={data.firstname}
                />
                <Input
                  type="text"
                  name="lastname"
                  onChange={handleChange}
                  value={data.lastname}
                />
                <Input
                  type="email"
                  name="email"
                  onChange={handleChange}
                  value={data.email}
                />
                <Input
                  type="tel"
                  name="phoneNo"
                  onChange={handleChange}
                  value={data.phoneNo}
                />
                <PrimaryButton>Update</PrimaryButton>
              </Form>
            </div>
          );
        };

constmiddlepanel=（{user}）=>{
const[data，setData]=useState({
名字：“，
姓氏：“，
电邮：“，
电话号码：“，
});
const{firstname，lastname，email，phoneNo}=data；
useffect（（）=>{
const fetchUser=async（）=>{
const res=等待axios.get(`http://localhost:5000/users/${user.\u id}`）；
设置数据({
firstname:res.data.firstname，
lastname:res.data.lastname，
电子邮件：res.data.email，
phoneNo:res.data.phoneNo，
});
};
fetchUser（）；
}，[user._id]）；
常数handleChange=（e）=>{
常量{name，value}=e.target；
setData（{…数据，[名称]：值}）；
};
const handleSubmit=async（e）=>{
e、 预防默认值（）；
const newUser={firstname，lastname，email，phoneNo}；
试一试{
常量配置={
标题：{
“内容类型”：“应用程序/json”，
},
};
const body=JSON.stringify（newUser）；
等待axios补丁(
`http://localhost:5000/users/${user.\u id}`，
身体，
配置
);
}捕捉（错误）{
控制台日志（err）；
}
};
返回(
更新
);
};

---

我想在Middlepanel中显示更新后的用户信息

试试这段代码，我在codesandbox中测试了它的效果

import React, { Component, Fragment } from "react";
import axios from "axios";

class Home extends Component {
  state = {
    loadUsers: [],
    currentUser: null
  };

  async componentDidMount() {
    const res = await axios.get("https://reqres.in/api/users?page=2");

    this.setState({ loadUsers: res.data.data });
  }

  setUser = (currentUser) => {
    console.log(currentUser);
    
    this.setState({ currentUser });
  };

  render() {
    return (
      <Fragment>
        <div className="row">
          <div className="col-md-3" style={{ backgroundColor: "#303F9F" }}>
            {/* <Typography variant="h6">List all Counsellors</Typography> */}
            {this.state.loadUsers
              ? this.state.loadUsers.map((user) => {
                  const { _id, first_name, lastname } = user;
                  return (
                    <div key={_id}>
                      <button onClick={()=> this.setUser(first_name)}>
                        {first_name} {lastname}
                      </button>
                    </div>
                  );
                })
              : null}
          </div>
          <div className="col-md-4">
            {this.state.currentUser && <div>{this.state.currentUser}</div>}
          </div>
        </div>
      </Fragment>
    );
  }
}

export default Home;

import React，{Component，Fragment}来自“React”；
从“axios”导入axios；
类Home扩展组件{
状态={
loadUsers:[]，
当前用户：空
};
异步组件didmount（）{
const res=等待axios.get（“https://reqres.in/api/users?page=2");
this.setState（{loadUsers:res.data.data}）；
}
设置用户=（当前用户）=>{
console.log（当前用户）；
this.setState（{currentUser}）；
};
render（）{
返回(
{/*列出所有顾问*/}
{this.state.loadUsers
？this.state.loadUsers.map（（用户）=>{
const{u id，first\u name，lastname}=user；
返回(
this.setUser（名字）}>
{first_name}{lastname}
);
})
：null}
{this.state.currentU