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

【问题标题】：How to add newly updated dynamic values in state to old object in React.js?如何将状态中新更新的动态值添加到 React.js 中的旧对象？
【发布时间】：2020-03-05 21:31:27
【问题描述】：

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

我尝试在提交表单后执行 this.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>
)}

更新方法：

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

我想要我的 editEmployee 对象中新更新的值，我将其发送到后端服务器以更新用户信息。

【问题讨论】：

标签： javascript reactjs object dynamic state

【解决方案1】：

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

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))
}

您的handleChange 应该更新状态值，并且您不必在提交表单期间调用setState。当您致电updateEmployee时，您应该已经拥有状态的最新更改

【讨论】：

你能把我的答案标记为正确答案吗？谢谢！