React JS动态表单onChange处理问题：如何修改函数得到预期嵌套状态输出

存在的问题 #

• 状态结构操作错误：你的根状态data是包含native、rolls两个数组属性的对象，但现有处理函数直接将对象展开为数组，完全破坏了原有状态结构。
• 缺少数组分类标识：两个不同数组native和rolls触发更新时，没有告知处理函数当前修改的是哪个数组的项，无法准确定位更新位置。
• 参数接收不匹配：调用handleChange时传入了4个参数，但函数定义只接收3个，传入的item.id被直接丢弃，无法给最终对象赋值id字段。
• 拼写错误：遍历部分的navtive为拼写错误，应为native，会导致数组遍历失败。

修复步骤 #

1. 修改渲染层的onChange调用 #

新增数组类型作为第一个入参，告知处理函数当前操作的数组类别：
遍历native数组的输入框：

{native?.map((item, index) => {
    return (
        <input
        type="text"
        name={item.id}
        onChange={(e) =>
            handleChange("native", "fee", e.target.value, index, item.id)
        }
        />
)}}

遍历rolls数组的输入框：

{rolls?.map((item, index) => {
    return (
        <input
        type="text"
        name={item.id}
        onChange={(e) =>
            handleChange("rolls", "fee", e.target.value, index, item.id)
        }
        />
)}}

2. 重写handleChange处理函数 #

按照不可变更新原则修改状态，确保最终结构符合预期：

const handleChange = (arrayType, field, value, index, id) => {
  setData((prevState) => {
    // 拷贝根状态对象，避免直接修改原状态
    const nextState = {...prevState};
    // 拷贝目标数组，保证更新的不可变性
    const targetArray = [...nextState[arrayType]];
    // 更新对应索引的项，保留原有属性的同时赋值id和修改的字段
    targetArray[index] = {
      ...targetArray[index],
      id,
      [field]: value
    };
    // 替换根状态中的目标数组
    nextState[arrayType] = targetArray;
    return nextState;
  });
};

如果你的item.id是初始化时就固定不会变化的，也可以去掉更新逻辑里的id赋值，仅在数组项初始化的时候赋值即可，不影响字段更新逻辑。

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