React中MenuItem嵌套Menu时无法正确获取对应用户ID的问题

数据老陈

2026-8-12

这问题本质是循环渲染时变量作用域没处理好，所有操作按钮的事件都引用了最后一次循环的用户ID值。下面直接给解决方案和正确代码示例：

核心原因

循环渲染用户行时，若没正确绑定当前用户的ID，或者没给列表项加唯一key，React会复用组件，导致事件处理函数共享同一个变量引用，最终只拿到最后一个用户的ID。

解决方案

1. 给列表项加唯一`key`

React需要key来区分每个列表项，避免组件复用导致的变量混乱，推荐用用户ID作为key。

2. 直接在事件中绑定当前用户ID

通过箭头函数在onClick事件里传递当前循环的user.id，确保每个按钮的事件都捕获对应用户的ID。

正确代码示例

假设用Ant Design组件库，正确写法如下：

import { Table, Tooltip, Dropdown, Button, Menu } from 'antd';

const UserTable = ({ users }) => {
  // 编辑事件：直接接收用户ID参数
  const handleEdit = (userId) => {
    console.log('要编辑的用户ID：', userId);
    // 执行你的编辑逻辑
  };

  // 删除事件：直接接收用户ID参数
  const handleRemove = (userId) => {
    console.log('要删除的用户ID：', userId);
    // 执行你的删除逻辑
  };

  return (
    <Table dataSource={users} rowKey="id">
      <Table.Column
        title="操作"
        render={(text, record) => (
          <Tooltip title="更多操作">
            <Dropdown
              overlay={
                <Menu>
                  <Menu.Item onClick={() => handleEdit(record.id)}>编辑</Menu.Item>
                  <Menu.Item onClick={() => handleRemove(record.id)}>删除</Menu.Item>
                </Menu>
              }
            >
              <Button type="text">操作</Button>
            </Dropdown>
          </Tooltip>
        )}
      />
      {/* 其他列配置 */}
    </Table>
  );
};

export default UserTable;