如何从 React 状态数组中删除组件而不删除数组的其余部分？

Question

我已经制作了一个基本的应用程序来练习 React，但我很困惑为什么当我尝试从状态数组中删除单个组件时，它之后的所有项目也会被删除。这是我的基本代码：

App.js：

import React from 'react' 
import Parent from './Parent';
import './App.css';

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

export default App;

Parent.js：

import React, { useState } from 'react';
import ListItem from './ListItem';
import './App.css';

function Parent() {
  const [itemList, setItemList] = useState([])
  const [numbers, setNumbers] = useState([])

  const addItem = () => {
    const id = Math.ceil(Math.random()*10000)
    const newItem = <ListItem 
      id={id}
      name={'Item-' + id}
      deleteItem={deleteItem}
    />
    const list = [...itemList, newItem]
    setItemList(list)
  };

  const deleteItem = (id) => {
    let newItemList = itemList;
    newItemList = newItemList.filter(item => {
        return item.id !== id
    })
    setItemList(newItemList);
  }

  const addNumber = () => {
    const newNumbers = [...numbers, numbers.length + 1]
    setNumbers(newNumbers)
  }

  const deleteNum = (e) => {
    let newNumbers = numbers
    newNumbers = newNumbers.filter(n => n !== +e.target.innerHTML)
    setNumbers(newNumbers);
  }

  return (
    <div className="Parent">
      List of items:
      <div>
        {itemList}
      </div>
      <button onClick={addItem}>
        Add item
      </button>
      <div>
        List of numbers:
        <div>
          {numbers.map(num => (
            <div onClick={deleteNum}>{num}</div>
          ))}
        </div>
      </div>
      <button onClick={addNumber}>
        Add number
      </button>
    </div>
  );
};

export default Parent;

ListItem.js：

import React from 'react';
import './App.css';

function ListItem(props) {

  const { id, name, deleteItem } = props;

  const handleDeleteItem = () => {
    deleteItem(id);
  }

  return (
    <div className="ListItem" onClick={handleDeleteItem}>
      <div>{name}</div>
    </div>
  );
};

export default ListItem;

1. 当我通过单击按钮添加项目时，父状态会正确更新。
2. 当我单击项目（删除它）时，它会删除自身，但也会删除数组中出现在它之后的每个项目
3. 我也用数字对其进行了测试（不是创建单独的组件）。这些删除正确 - 仅删除我单击的单个数字。

据我所知，各个项目组件正在保存有关创建它们时父状态值的引用。这对我来说似乎是非常奇怪的行为......

当 itemList 状态数组由单独的组件组成时，如何仅删除单个项目？

谢谢

编辑：根据 Bergi 的说明，我通过将“itemList”状态值转换为要在列表更改时渲染（和重新渲染）的对象数组来解决此问题：

    const addItem = () => {
      const id = Math.ceil(Math.random()*10000);
      const newItem = {
        id: id,
        name: 'Item-' + id,
      }
      const newList = [...itemList, newItem]
      setItemList(newList)
    }

...

    React.useEffect(() => {

    }, [itemList]);

...

<div className="Parent">
    List of items:
    <div>
        {itemList.map(item => {
        return (<ListItem
            id={item.id}
            name={item.name}
            deleteItem={deleteItem}
        />);
    })}
...

Answer 1

问题在于您的deleteItem 函数是旧itemList 的闭包，从创建项目的那一刻开始。两种解决方案：

• 使用setItemList的回调形式
• 不要在该列表中存储 react 元素，而只是简单的对象（您可以将其用作道具）并仅在渲染 ListItems 时传递（最新的）deleteItem 函数