在 react 中，直接修改全局数组并触发 dom 更新会导致错误；必须使用 usestate 管理可变状态，并通过不可变操作（如 filter）生成新数组来安全更新列表。
在 react 中，直接修改全局数组并触发 dom 更新会导致错误；必须使用 usestate 管理可变状态，并通过不可变操作（如 filter）生成新数组来安全更新列表。
在构建动态表单（如可增删的输入字段）时，一个常见误区是依赖全局可变数组（如 idArr）并直接调用 splice() 修改它。这不仅违反 React 的状态不可变原则，还会导致渲染不一致、DOM 节点错位，进而引发类似 Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node 的严重错误——其根本原因是：React 依靠虚拟 DOM 的 key 和状态快照协调真实 DOM，而原地修改数组破坏了这一映射关系。
✅ 正确做法是：使用 useState 声明状态数组，并始终通过返回新数组的方式更新状态。例如，删除指定 ID 字段应使用 filter() 而非 splice()：
import { useState } from 'react';
function DynamicForm() {
const [idArr, setIdArr] = useState([1]); // 初始含一个字段
const [nextId, setNextId] = useState(2); // 用于生成唯一 ID
const addField = () => {
setIdArr(prev => [...prev, nextId]);
setNextId(prev => prev + 1);
};
const removeFromArray = (id) => {
setIdArr(prev => prev.filter(item => item !== id));
};
const components = idArr.map((id) => (
<Component
key={id} // ⚠️ 必须设置 key！且需稳定、唯一
index={id}
onDelete={() => removeFromArray(id)}
/>
));
return (
<div>
{components}
<button onClick={addField}>+</button>
</div>
);
}⚠️ 关键注意事项：
- 必须为每个列表项设置 key 属性：key={id} 是强制要求，它帮助 React 高效识别元素增删，避免重渲染异常；
- removeFromArray 中原写法 idArr.splice(idArr.indexOf(id)) 存在双重问题：一是 splice() 原地修改数组（破坏不可变性），二是参数缺失（splice(index, deleteCount) 少传了删除数量，实际会删掉该索引之后所有元素）；
- 自定义组件 Component 内部应接收 onDelete 回调，并在“x”图标点击时触发，而非直接操作全局数组；
- 若字段需携带更多数据（如初始值、类型），建议将 idArr 升级为对象数组（如 [{id: 1, value: '', type: 'text'}]），仍遵循 filter() + setState 模式更新。
总结：React 中没有真正的“全局可变数组”——所有影响视图的状态都应托管于 useState 或 useReducer，并通过纯函数方式生成新状态。这是避免 DOM 同步错误、保障组件行为可预测的核心实践。
