React如何更新数组中多层嵌套对象内的an1、an2等字段的值？

云上老周

2026-10-1

问题根因

你的现有更新逻辑本身是正确的，问题出在handleChange函数没有接收*要修改的数组项下标index*作为参数，导致if (i === index)的匹配判断无法定位到目标项，自然没法完成字段更新。

调整方案

1. 调用`handleChange`时传入对应下标

你在循环渲染输入框的位置，需要把当前项的下标和要修改的animals字段名一起传入事件处理函数，示例渲染逻辑如下：

{data.map((item, index) => (
  <div key={index}>
    <p>所在地：{item.location}</p>
    <input 
      value={item.animals.an1}
      onChange={(e) => handleChange(e, 'an1', index)}
      placeholder="动物1"
    />
    <input 
      value={item.animals.an2}
      onChange={(e) => handleChange(e, 'an2', index)}
      placeholder="动物2"
    />
  </div>
))}

2. 调整`handleChange`接收下标参数

const handleChange = (e, input, index) => {
  const updatedList = data.map((item, i) => {
    if (i === index) {
      // 逐层浅拷贝保证状态不可变，修改对应字段
      return {
        ...item,
        animals: {
          ...item.animals,
          [input]: e.target.value
        }
      };
    }
    return item;
  });
  setData(updatedList);
}