无法在React中更新全局数组

Question

我正在构建一个基于 React 的应用程序，我需要在其中动态生成一些输入字段。必须通过单击“+”按钮添加新的输入字段，并且我应该能够使用每个输入字段旁边的“x”图标删除各个字段。

我使用计数变量为每个字段提供唯一的 id，该变量在单击“+”图标时递增，并且我使用名为“idArr”的全局数组来跟踪当前显示的字段的 id。 “x”图标中的“+”图标功能正常工作，当我从全局数组中删除索引时，出现以下错误 -

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

我编写了一个函数，通过以下方式从数组中删除 id：

    const removeFromArray = (id) => {
        idArr.splice(idArr.indexOf(id));
    };

这就是我的输入字段的生成方式：

    const components = idArr.map((id) =>
        <Component index={id} idArr={idArr} />
    )

这里的“组件”是我正在创建的自定义组件，其中包含我的输入字段和“x”图标。

这是我的返回函数 -

return (
   <div id={DOM_ID}> {components} </div>
)

Answer 1

首先，React 中的状态应该是不可变的。我们将使用 useState 创建新数组，然后我们可以使用

filter

方法来处理它。

 const [idArr, setIdArr] = useState('put your array value here') // replace text with your array

 const removeFromArray = (id) => {
   const updatedArray = idArr.filter(item => item !== id)
   setIdArr(updatedArray);
 };