React.js中如何将表单动态更新值合并至旧对象并提交后端？

我来帮你搞定这个问题！你的核心需求是把动态表单里的新输入值正确合并到现有的editEmployee对象中，然后提交到后端完成更新对吧？咱们一步步调整代码，解决几个关键问题：

1. 先完善handleChange方法，实时跟踪输入值 #

你现在的代码里只写了handleChange的调用，但没有实现它的逻辑。我们需要让这个方法实时把用户输入的内容更新到editEmployee对象里，利用React的受控组件特性：

handleChange = (e) => {
  const { name, value } = e.target;
  // 使用函数式更新，确保拿到最新的state
  this.setState(prevState => ({
    editEmployee: {
      ...prevState.editEmployee,
      [name]: value // 用计算属性名匹配动态字段
    }
  }));
}

这里的关键点：

• 通过e.target.name拿到当前输入对应的字段名（比如"Name"、"Gender"）
• 用展开运算符...复制旧的editEmployee对象，避免直接修改原state
• 计算属性名[name]让我们可以动态更新对应的字段

2. 把表单改成受控组件 #

原来的表单用了defaultValue，这是非受控组件的写法，没法实时同步state。改成value绑定到editEmployee的对应字段，确保表单显示和state完全一致：

<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} 
        value={props.editEmployee[details]} // 绑定受控值
      />
    </Fragment>
  ))}
  <button type="submit">更新员工信息</button>
</form>

3. 修正updateEmployee提交方法 #

你原来的代码有两个问题：

• setState是异步的，直接在它之后调用axios.put会拿到旧的state值
• 最后把editEmployee设为空字符串是错误的（应该是对象类型）

修改后的提交方法，我们直接用已经实时更新好的this.state.editEmployee发送请求，同时处理异步和错误：

updateEmployee = async (e) => {
  e.preventDefault();
  
  try {
    // 直接使用最新的editEmployee状态
    const res = await axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee);
    console.log("更新成功:", res);
    
    // 提交成功后重置状态（这里可以根据需求改成初始值或空对象）
    this.setState({ 
      editEmployee: {
        Name: "",
        Gender: "",
        Education: "",
        "Mobile Number": "",
        Experience: ""
      } 
    });
  } catch (error) {
    console.error("更新失败:", error);
    // 这里可以添加错误提示，比如给用户显示弹窗
  }
}

如果不想用async/await，也可以用then链式调用：

updateEmployee = (e) => {
  e.preventDefault();
  
  axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee)
    .then(res => {
      console.log("更新成功:", res);
      this.setState({ 
        editEmployee: {
          Name: "",
          Gender: "",
          Education: "",
          "Mobile Number": "",
          Experience: ""
        } 
      });
    })
    .catch(error => console.error("更新失败:", error));
}

额外小提示 #

• 你state里的Gender字段值是23，这看起来是笔误，应该是性别字符串比如"Male"/"Female"，记得修正哦
• 如果字段里有空格（比如"Mobile Number"），React的计算属性名依然能正确处理，不用担心

这样调整后，表单的输入会实时同步到editEmployee对象，提交时就能把最新的完整对象发送到后端啦！

内容的提问来源于stack exchange，提问作者Rohan Mandhare