在 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()：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

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}" index="{id}" ondelete="{()"> removeFromArray(id)} 
    />
  ));

  return (
    <div>
      {components}
      <button onclick="{addField}">+</button>
    </div>
  );
}</component>

⚠️ 关键注意事项：

• 必须为每个列表项设置 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 同步错误、保障组件行为可预测的核心实践。