React中更新对象数组类型useState同步表单值实现多表单提交

核心错误原因 #

• 遍历全量数据重复调用setFvalues，后一次执行的状态更新会直接覆盖前一次的结果，最终状态完全不符合预期
• 未在输入事件中传递当前表单项对应的数组索引，无法精确定位需要更新的数组元素
• 直接修改状态内部属性、把原本数组类型的状态赋值为单值，违反React状态不可变更新规则，轻则状态错乱，重则触发渲染报错
• 错误使用fvalues[id].name写法，这里的name会被识别为对象的固定属性，而非事件中拿到的动态字段名

可直接落地的修复方案 #

第一步：修改表单输入项的事件绑定 #

循环渲染所有输入框时，把当前循环的索引id作为参数传入事件处理函数，替换原有直接绑定handleChange的写法，示例如下：

// 以mobile输入框为例，其余emailId、age等所有同循环内的输入框都按此规则修改
<TextField 
  helperText={ferrors?.mobile}  
  value={fvalues[id].mobile} 
  name="mobile" 
  classes={{ root: classes.textField }} 
  InputProps={{ className: classes.textField }} 
  label="Mobile Number" 
  variant="outlined" 
  // 改动点：传入事件对象+当前表单项索引
  onChange={(e) => handleChange(e, id)} 
/>

第二步：重写handleChange逻辑 #

遵循状态不可变原则，一次更新生成完整的新状态数组，仅修改当前索引对应的对象字段：

const handleChange = (e, currentIndex) => {
  const { name, value } = e.target;
  setFvalues(prevValues => {
    // 遍历原状态数组，返回全新的数组引用
    return prevValues.map((item, index) => {
      // 仅匹配当前操作的表单项，更新对应字段
      if (index === currentIndex) {
        return {
          ...item,
          [name]: value // 动态字段名用中括号包裹，正确读取事件传过来的name值
        }
      }
      // 非当前操作的表单项直接返回原值，不做修改
      return item;
    })
  })
};

补充注意事项 #

• 如果初始化用的data是接口异步返回的，需要在data更新时通过useEffect同步重置fvalues的初始值，避免状态数组长度和实际渲染的表单数不匹配
• 不要在循环内多次调用状态setter函数，单次更新生成完整的新状态即可，避免重复渲染和状态覆盖问题
• 禁止直接修改原状态的属性，比如不要写fvalues[id][name] = value这类直接修改原对象的代码，会导致React无法检测到状态变化，触发渲染异常
• 页面中“Select same address for all”的复选框功能，可以在复选框的change事件中，判断勾选后把第一组表单的地址字段批量赋值给所有数组项即可，逻辑和上述更新规则一致。

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