React全局数组更新失败，动态输入字段删除报错求助

核心问题点 #

1. splice 方法使用错误：你的删除函数里，splice(idArr.indexOf(id)) 会删除从该ID索引位置开始到数组末尾的所有元素，而非仅删除目标ID对应的项，需指定删除数量为1。
2. 未用React状态管理数组：全局数组 idArr 的修改不会触发组件重渲染，导致DOM结构与数组数据不同步，这是引发 removeChild 错误的关键原因。
3. 缺少唯一 key 属性：map 生成组件时未设置 key，React无法准确追踪每个组件的身份，更新DOM时会出现匹配错误。
4. 数据流不符合React规范：子组件直接接收整个 idArr 不合适，应由父组件传递删除函数，保持单向数据流。

修复后的代码示例 #

父组件

import { useState } from 'react';
import Component from './Component';

export default function ParentComponent() {
  // 用useState管理ID数组和计数
  const [idArr, setIdArr] = useState([]);
  const [count, setCount] = useState(0);

  // 添加字段的函数
  const addField = () => {
    const newId = count + 1;
    setCount(newId);
    setIdArr(prev => [...prev, newId]);
  };

  // 修正后的删除函数（用filter更安全）
  const removeFromArray = (id) => {
    setIdArr(prev => prev.filter(item => item !== id));
  };

  // 生成组件时添加唯一key
  const components = idArr.map((id) =>
    <Component key={id} id={id} onRemove={removeFromArray} />
  );

  return (
    <div>
      <button onClick={addField}>+</button>
      <div id="input-fields-container">{components}</div>
    </div>
  );
}

子组件（Component）

export default function Component({ id, onRemove }) {
  return (
    <div className="input-field">
      <input type="text" placeholder={`字段 ${id}`} />
      <span onClick={() => onRemove(id)}>x</span>
    </div>
  );
}

关键说明 #

• 用 useState 管理 idArr，每次修改通过 setIdArr 更新，确保触发组件重渲染，让DOM与数据保持同步。
• 用 filter 方法删除元素更安全（返回新数组，避免直接修改原数组），若坚持用 splice，需先创建原数组的副本再操作。
• 为每个动态生成的组件添加唯一 key（此处用ID作为key），帮助React正确识别组件，避免DOM更新时的匹配错误。
• 子组件通过 onRemove 回调触发删除操作，父组件负责更新状态，符合React单向数据流的设计理念。

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