javascript - react : Edit and Delete from a pop-up menu on a list item

Question

我有一个列表容器组件，它是父级。它映射出列表行。在列表行组件(即子项)上，每个项目都有一个用于切换弹出菜单的按钮，该菜单有一个用于编辑的按钮和一个用于删除的按钮。菜单本身是列表行的兄弟，因为如果我将它包含在列表行组件中，每一行都会呈现一个菜单，并且在切换时，它们都会相互叠加。编辑和删除按钮可以切换表单进行编辑，或者直接删除项目。
我目前拥有的是:

// Parent / Container

  const [itemID, setItemID] = useState(null);

  const handleMenuOpen = (id) => (e) => {
    setAnchorEl(e.currentTarget); // for menu placement
    setItemID(id);
  };

  const handleItemDelete = () => {
    dispatch(deleteItem(itemID));
  };

<List>
  <ListRow handleMenuOpen={handleMenuOpen} />
  <Menu handleItemDelete={handleItemDelete}  itemID={itemID} />
</List>;


// List Row

<Button onClick={handleMenuOpen(item.id)} />;

// Menu

<MenuItem onClick={() => handleModalOpen(itemID)} />;

<MenuItem onClick={() => handleItemDelete()} />;

编辑按钮工作正常，但无论我如何尝试，我都无法从列表项的 onClick 中获取 setItemID。它总是作为 null 的初始值出现。我在控制台记录了函数参数中的 ID 正确显示，但 setState Hook 不起作用。
我尝试将 useState 放在列表项上并通过 useContext 传递 ID，但在调用handledItemDelete 时出现未定义。
我尝试在 child 上使用 ref 从 parent 那里获取 ID，这也是未定义的。
我想不出如何使用 useEffect 来检查 handleMenuOpen 参数的变化。
我没主意了。任何人都知道问题是什么以及如何解决它？

Answer 1

您可能应该只传递 handleMenuOpen 函数并依赖所选元素，然后将其 id 存储在 itemID 变量中。

const handleMenuOpen = (e) => {
    setAnchorEl(e.currentTarget); // for menu placement
    setItemID(e.currentTarget.id);
};
  
  
<MenuItem onClick={handleMenuOpen} />;