17370845950

本文详解 react 中安全删除 state 数组元素的核心原则——必须基于最新状态快照进行操作，并区分 `value` 与 `defaultvalue` 在受控/非受控输入中的关键影响。

在 React 中，直接使用索引（如 splice）从 state 数组中删除元素时，若未正确依赖上一次状态快照，极易因异步更新和闭包捕获过期值而导致“删错项”——例如本例中点击删除第 2 条数据，却意外移除了最后一条。根本原因在于：setState 是异步且可能批处理的，而闭包中引用的 gridData 可能已是陈旧快照。

正确的做法是始终通过函数式更新（setGridData(prev => {...})）获取最新状态，并在此基础上执行不可变操作。推荐使用 filter 而非 splice，因其天然符合不可变范式，语义清晰且无副作用：

const delData = (ndx) => {
  setGridData((prevGridData) => ({
    ...prevGridData,
    data: prevGridData.data.filter((_, index) => index !== ndx)
  }));
};

此外，示例中暴露的另一个关键陷阱是 的属性选择：

• ✅ 使用 value={r.description}（受控组件）：输入值完全由 state 驱动，每次渲染都同步最新数据，删除逻辑与 UI 始终一致；
• ❌ 改为 defaultValue={r.descr

  

  iption}（非受控组件）：初始值仅在挂载时设置，后续 state 更新不会影响已渲染的 input，导致 DOM 状态与 React state 错位。当用户点击删除按钮时，rndx 索引仍指向原始渲染顺序，但实际 DOM 结构已因 state 更新而变化，从而引发“删除最后一项”的幻觉。

最佳实践总结：

1. 永远用函数式更新处理依赖前序 state 的操作，杜绝闭包捕获 stale state；
2. 优先使用 filter 替代 splice，保障不可变性与可预测性；
3. 对动态列表中的表单控件，坚持使用 value + onChange 实现受控模式，确保 UI 与 state 严格同步；
4. 避免在事件处理器中直接解构或缓存 state（如 let newList = [...gridData.data]），除非明确需要当前快照且不涉及后续 state 依赖。

遵循以上原则，即可彻底规避数组删除中的常见竞态与渲染错位问题。