javascript - 在 react 中，如何从列表中删除特定项目

Question

我有一个在向其中添加项目时创建的列表:

  const addToPool = () => {
    setDiePool([
      ...diePool,
      {
        dp1 : poolCount,
        dp2 : diceType,
        dp3 : diceNumber,
        dp4 : diceAdjuster
      }
    ]);

    setPoolCount(poolCount+1);
  };

现在我想从列表中删除特定项目。我将所有项目显示在表格中，每个项目旁边都有一个删除图标。当我单击垃圾桶图标时，我想将其从列表中删除。它不起作用，但也没有抛出任何错误。不确定我做错了什么。

我的 table :

      <tbody>
            {diePool.map(die => (<tr key={die.dp1}><td><FaDice /></td><td>{die.dp1}</td><td>{die.dp2}</td><td>{die.dp3}</td><td>{die.dp4}</td><td><button dp1={die.dp1} onClick={handleRemoveItem}><FaTrashAlt /></button></td></tr>))}
      </tbody>

我的删除代码:

  const [list, updateList] = useState(diePool);
  const handleRemoveItem = (e) => {
     const dp1 = e.target.getAttribute("dp1")
     updateList(list.filter(diePool => diePool.dp1 !== dp1));
   };

Answer 1

尝试将 die 作为参数传递给handleRemoveItem，这应该可行:

import React from "react";
import ReactDOM from "react-dom";


function App() {
  const [diePool, setDiePool] = React.useState([
    {
      dp1: "poolCount",
      dp2: "diceType",
      dp3: "diceNumber",
      dp4: "diceAdjuster"
    },
    {
      dp1: "poolCount1",
      dp2: "diceType1",
      dp3: "diceNumber1",
      dp4: "diceAdjuster1"
    }
  ]);

  const handleRemoveItem = die => {
    setDiePool(diePool.filter(diePool => diePool.dp1 !== die.dp1));
  };
  return (
    <div className="App">
      {diePool.map(die => (
        <tr key={die.dp1}>
          <td>
            <span>test</span>
          </td>
          <td>{die.dp1}</td>
          <td>{die.dp2}</td>
          <td>{die.dp3}</td>
          <td>{die.dp4}</td>
          <td>
            <button dp1={die.dp1} onClick={() => handleRemoveItem(die)}>
              <span>FaTrashAlt</span>
            </button>
          </td>
        </tr>
      ))}
    </div>
  );
}