React动态输入框onChange如何将值存入对应嵌套对象数组

架构老林

2026-9-23

现有代码错误点

传参缺失：触发onChange时没有告诉处理函数要修改的是native还是rolls数组，且调用时传入的item.id没有被处理函数接收
state更新逻辑错误：你的初始state是包含两个数组属性的对象，原有代码错误将对象转为数组操作，完全偏离预期数据结构
拼写错误：渲染时native被错写为navtive，会导致变量读取失败

修改方案

先修改渲染阶段的onChange调用逻辑，补充所属数组标识：

// native数组遍历部分
{data.native?.map((item, index) => {
  return (
    <input
      type="text"
      name={item.id}
      onChange={(e) =>
        // 第一个参数传入当前所属数组名
        handleChange("native", "fee", e.target.value, index, item.id)
      }
    />
)})}

// rolls数组遍历部分
{data.rolls?.map((item, index) => {
  return (
    <input
      type="text"
      name={item.id}
      onChange={(e) =>
        // 第一个参数传入当前所属数组名
        handleChange("rolls", "fee", e.target.value, index, item.id)
      }
    />
)})}

替换handleChange处理函数为以下实现：

const handleChange = (arrayType, field, value, index, id) => {
  setData((prevState) => {
    // 拷贝目标数组，避免直接修改原state
    const targetArray = [...prevState[arrayType]]
    // 更新对应索引的对象，保留原有属性同时赋值新内容
    targetArray[index] = {
      ...targetArray[index],
      id,
      [field]: value
    }
    // 返回全新的state对象，未修改的数组保持原引用
    return {
      ...prevState,
      [arrayType]: targetArray
    }
  })
}