React MUI开发：解决菜单组件无法获取对应列表项以实现删除功能的问题

这个问题我之前也碰到过！核心思路是在打开菜单的时候同时记录当前对应的列表项，而不是让Menu去直接捕获循环里的项，这样就能用单个Menu组件对应所有ListItem，同时准确拿到要删除的目标项。

具体实现步骤： #

1. 新增状态存储选中项：在组件里添加一个状态，用来保存当前点击的待删除列表项
2. 点击菜单按钮时关联目标项：打开Menu的同时，把当前的collectionItem存入状态
3. 删除时使用选中项：Menu里的删除按钮直接调用存储的选中项执行删除逻辑
4. 关闭菜单时清空状态：避免残留选中项导致后续误操作

修改后的完整代码示例 #

import { useState } from 'react';
import { List, ListItem, IconButton, Menu, MenuItem } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';

function YourCollectionList() {
  const [anchorEl, setAnchorEl] = useState(null);
  // 新增状态：存储当前选中的待删除项
  const [selectedItem, setSelectedItem] = useState(null);
  const myCollection = [/* 你的数组数据，建议每个项带唯一id */];

  const handleDelete = (item) => {
    // 这里执行你的删除逻辑，比如过滤数组
    console.log('正在删除:', item);
    // 示例：setMyCollection(prev => prev.filter(i => i.id !== item.id));
  };

  return (
    <List> 
      {/* 保持单个Menu组件 */}
      <Menu 
        open={Boolean(anchorEl)} 
        anchorEl={anchorEl}
        onClose={() => {
          setAnchorEl(null);
          setSelectedItem(null); // 关闭菜单时清空选中项
        }}
      >
        <MenuItem onClick={() => {
          handleDelete(selectedItem);
          setAnchorEl(null); // 删除后关闭菜单
          setSelectedItem(null);
        }}>Delete</MenuItem>
      </Menu>

      {/* 循环渲染ListItem */}
      {myCollection.map((collectionItem) => (
        <ListItem 
          key={collectionItem.id} // 务必添加唯一key，React列表渲染最佳实践
          secondaryAction={
            <IconButton onClick={(e) => {
              setAnchorEl(e.currentTarget);
              setSelectedItem(collectionItem); // 存储当前点击的列表项
            }}>
              <MoreVertIcon />
            </IconButton>
          }
        >
          {collectionItem.name}
        </ListItem>
      ))}
    </List>
  );
}

export default YourCollectionList;

为什么这个方案可行？ #

• 始终只渲染一个Menu组件，避免了大量冗余组件，性能更优
• 通过状态selectedItem建立了Menu和当前点击ListItem的关联，完美解决了Menu无法直接获取循环中collectionItem的问题
• 关闭菜单时清空状态，避免了切换列表项时的选中状态残留问题

内容的提问来源于stack exchange，提问作者Tim Lâm