Question

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

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

    setPoolCount(poolCount+1);
  };

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

我的桌子：

      <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>
  );
}

Answer 2

另一种方法是在handleRemoveItem函数中传递值。

<button dp1={die.dp1} onClick={() => handleRemoveItem(dp1)}><FaTrashAlt /></button>

const handleRemoveItem = (item) => {
     updateList(list.filter(diePool => diePool.dp1 !== item));
  };

Answer 3

删除第二个useState似乎是不必要的，并且不会更新表的映射状态。

// Remove this
// const [list, updateList] = useState(diePool); 

const handleRemoveItem = (e) => {
  const dp1 = e.target.getAttribute("dp1") 
  // use the setter from the original state hook
  setDiePool(diePool.filter(die => die.dp1 !== dp1);
};

Answer 4

在handleRemoveItem中尝试用const dp1 = e.currentTarget.getAttribute("dp1")代替const dp1 = e.target.getAttribute("dp1")

检查以下内容：https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

在反应中，如何从列表中删除特定项目

4 个答案: