React.js中如何正确更新状态元素？状态值被覆盖问题求助

核心问题 #

你的代码存在两个关键错误导致状态被覆盖：

1. 初始状态inp定义为数组[]，但更新时错误地将数组当作对象展开合并，再包裹成新数组，每次调用都会重置整个数组结构。
2. 更新逻辑[{ ...prevState, ...input }]会把之前的数组（prevState）转成以索引为键的对象，再和input合并，最终生成一个仅包含单个合并后对象的数组，完全覆盖之前的数组内容。

针对不同需求的修复方案 #

需求1：向数组中追加新的表单数据

如果目标是每次提交表单时，往inp数组里添加一条新的input对象，修改inputHandler为：

const inputHandler = (input) => {
  modifyInp((prevState) => [...prevState, input]);
};

通过展开之前的数组，再追加新的input对象生成新数组，实现数据累积。

需求2：更新数组中已存在的某条数据

如果需要根据唯一标识（比如id）更新数组里的特定项，假设input包含唯一id字段，修改inputHandler为：

const inputHandler = (input) => {
  modifyInp((prevState) => 
    prevState.map(item => 
      item.id === input.id ? {...item, ...input} : item
    )
  );
};

遍历数组匹配目标项，合并新数据更新该项，其他项保持不变。

需求3：仅维护单个表单对象（而非数组）

如果场景不需要数组，只是更新单个表单对象的状态，先修改初始状态为对象，再调整更新逻辑：

const [inp, modifyInp] = useState({});
const inputHandler = (input) => {
  modifyInp((prevState) => ({ ...prevState, ...input }));
};

每次调用会将input的属性合并到现有对象中，实现单对象的状态更新。

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