React中如何更新嵌套对象内的对象数组？

问题根源与修复步骤 #

1. 自定义属性不规范
   input的index并非标准HTML属性，应改用data-index（符合HTML自定义属性规范），且获取后需转为数字类型，避免字符串索引引发的匹配错误。

2. 状态更新逻辑错误
   原代码中用[prevUser.education[index]]作为对象键的写法完全错误，正确逻辑需遵循React状态不可变原则：先复制原数组，修改对应索引的对象，再替换整个education数组。

修改后的完整代码 #

1. 渲染输入框部分

const listItems = props.userData.education.map((user, index) => {
  return (
    <div key={user.id}> {/* 建议用元素id作为key，替代index */}
      <h2>University/School #{index + 1}</h2>
      <input
        type="text"
        data-index={index}
        placeholder="Your school"
        name="school"
        onChange={props.handleChange}
        value={props.userData.education[index].school}
      />
    </div>
  );
});

2. 状态更新处理函数

const handleChange = (e) => {
  const { value, name } = e.target;
  const index = Number(e.target.getAttribute('data-index'));
  
  setUserData(prevUser => {
    // 复制原education数组，避免直接修改状态
    const updatedEducation = [...prevUser.education];
    // 复制目标对象并修改指定属性
    updatedEducation[index] = {
      ...updatedEducation[index],
      [name]: value
    };
    // 返回新的userData对象
    return {
      ...prevUser,
      education: updatedEducation
    };
  });
};

额外建议 #

尽量使用数组元素的id（如user.id）作为列表项的key，而非index，避免列表元素增删时因索引变化导致的不必要渲染或状态混乱。

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