React JS中更新数组旧值被覆盖的问题排查与解决

1. 数组更新逻辑错误：你在处理表单字段变更的handleChange函数中，没有复制原有的人员数组并修改指定位置的元素，而是直接创建新的单一元素数组覆盖了原数组，导致之前添加的人员数据被清空。比如错误使用setPersons([{ [name]: value }])这类写法，直接替换掉了整个数组。
2. 对象属性未合并：更新单个字段时，没有保留当前人员对象的其他属性，直接创建只包含当前修改字段的新对象，导致原有属性丢失，表现为数组元素内容被清空。
3. 控制台报错根源：报错是因为数组被错误清空后，后续渲染时无法获取原有人员对象的属性，触发了类似Cannot read properties of undefined的错误。

核心原则是绝不直接修改React的state，通过复制原数据并修改副本的方式更新，同时利用函数式更新避免异步state的问题。

1. 正确的字段变更处理函数 #

const handleChange = (index, e) => {
  const { name, value } = e.target;
  // 函数式更新，确保获取最新的state快照
  setPersons(prevPersons => {
    // 复制原数组
    const updatedPersons = [...prevPersons];
    // 复制对应索引的对象，合并新属性
    updatedPersons[index] = {
      ...updatedPersons[index],
      [name]: value
    };
    return updatedPersons;
  });
};

2. 正确的添加字段函数 #

const addPerson = () => {
  // 基于最新state添加新的空人员对象
  setPersons(prevPersons => [...prevPersons, { name: '', phone: '' }]);
};

3. 表单渲染的正确写法 #

确保每个输入框的name属性和人员对象的属性对应，并传递正确的索引：

{persons.map((person, index) => (
  <div key={index}>
    <input
      type="text"
      name="name"
      value={person.name}
      onChange={(e) => handleChange(index, e)}
      placeholder="Person details"
    />
    <input
      type="text"
      name="phone"
      value={person.phone}
      onChange={(e) => handleChange(index, e)}
      placeholder="Contact number"
    />
  </div>
))}
<button onClick={addPerson}>+ Add Person</button>

4. 初始化正确的state结构 #

确保初始state是包含空人员对象的数组：

const [persons, setPersons] = useState([{ name: '', phone: '' }]);

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