Javascript 如何将状态中新更新的动态值添加到React.js中的旧对象？

我正在Java+React.js中创建一个CRUD应用程序。我想更新用户信息，我正在填充一个基于employeeDetails数组的动态表单。结果是，我从状态为的用户处获得动态更新的值。但我不知道如何将这些新的输入值从表单添加到旧对象，并将其更新到后端并发送到后端。提前谢谢，谢谢你的帮助

在提交表单后，我尝试执行此操作。setState（）用新值更新旧对象

react应用程序的状态：

state = {
    employeeDetails: ['Name', 'Gender', 'Education', 'Address', 'Mobile Number', 'Experience'],
    editEmployee: {
     Name: "Rohan",
     Gender: 23,
     Education: "Software Engineer",
     Mobile Number: 12345,
     Experience: "Fresher"
    }
  }

更新用户的动态形式：

<form onSubmit={props.updateEmployee}>
   {
     Object.keys(props.editEmployee).map(details => <Fragment key={details}>
         <label>{details}</label><br />
         <input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
 </Fragment>
)}

---

我希望在我的editEmployee对象中得到最新更新的值，并将其发送到后端服务器以更新用户信息。

查看您的代码，假设您的表单是另一个单独的组件

const Form = (props) => (
  <form onSubmit={props.updateEmployee}>
    {Object.keys(props.editEmployee).map((details) => (
      <React.Fragment key={details}>
        <label>{details}</label><br />
        <input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
      </React.Fragment>
    ))}
  </form>
);

---

您的

handleChange

应该更新状态值，并且在提交表单期间不必调用

setState

。当你打电话给

updateEmployee

时，你应该已经有了状态的最新变化。你能把我的答案标记为正确答案吗？谢谢

const Form = (props) => (
  <form onSubmit={props.updateEmployee}>
    {Object.keys(props.editEmployee).map((details) => (
      <React.Fragment key={details}>
        <label>{details}</label><br />
        <input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
      </React.Fragment>
    ))}
  </form>
);

state = {
  employeeDetails: ['Name', 'Gender', 'Education', 'Address', 'Mobile Number', 'Experience'],
  editEmployee: {
    Name: "Rohan",
    Gender: 23,
    Education: "Software Engineer",
    'Mobile Number': 12345,
    Experience: "Fresher"
  }
}

handleChange = (e) => {
  this.setState({
    editEmployee: {
      ...this.state.editEmployee,
      [e.target.name]: e.target.value,
    },
  })
}

updateEmployee = (e) => {
  e.preventDefault();
  axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee)
    .then(res => console.log(res))
}