React：更新绑定数组状态的UI，当前修改员工数据的写法是否正确？

你的代码写法是正确的，能够实现更新员工数据的需求，但存在可以优化的空间，让代码更简洁、高效。

当前写法的合理性 #

你在handleChange里的逻辑完全符合React状态更新的原则：

• 没有直接修改原employees数组，而是通过[...employees]创建了数组副本
• 找到对应员工后生成了新的对象（{...editing, [e.target.name]: e.target.value}），没有修改原对象
• 最终通过setEmployees更新状态，流程正确，所以代码能正常运行。

可以优化的点 #

当前写法存在两次数组遍历（filter和indexOf），可以简化成一次遍历，同时用更符合React最佳实践的方式更新状态：

优化后的handleChange代码 #

const handleChange = (e, id) => {
  const { name, value } = e.target;
  // 使用函数式更新，确保拿到最新的state
  setEmployees(prevEmployees => 
    prevEmployees.map(emp => 
      // 找到目标员工则返回新对象，否则返回原对象
      emp.id === id ? { ...emp, [name]: value } : emp
    )
  );
};

优化点说明 #

1. 减少遍历次数：用map一次遍历完成查找和更新，替代原来的filter+indexOf+splice，代码更简洁高效
2. 函数式状态更新：通过prevEmployees获取最新的状态值，避免因为闭包导致的状态过期问题（比如快速连续输入时，可能拿到旧的state）
3. 更直观的逻辑：直接通过id匹配员工并更新字段，逻辑清晰易懂

额外小细节 #

React中元素的类名应该用className替代class（比如className="card"），虽然部分环境下class能运行，但这是React的规范写法，避免和JavaScript的class关键字冲突。

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