React中闭包导致动态Menu的index值异常问题求助

问题原因 #

1. 闭包变量捕获问题：在Steps.map循环中，MenuItem的点击回调（如handleComplete(index)）捕获的是循环变量index的引用，而非每次迭代的具体值。当循环结束后，index会固定为数组最后一项的索引，导致所有回调触发时都使用这个最终值，出现所有菜单显示同一个index的情况。
2. 共享状态冲突：所有动态生成的Menu组件共用同一个anchorEl和openMore状态。点击任意按钮时，anchorEl会被最后一次点击的元素覆盖，且所有菜单的打开状态都依赖同一个openMore，导致菜单状态混乱。

解决方案 #

1. 为每个菜单维护独立的锚点状态

将全局的anchorEl改为对象，存储每个索引对应的锚点元素，让每个菜单的打开状态独立：

// 替换原有的anchorEl状态
const [anchorEls, setAnchorEls] = useState<{ [key: number]: null | HTMLElement }>({})

// 更新handleClick，仅修改当前索引的锚点
const handleClick = (event: React.MouseEvent<HTMLElement>, index: number): void => {
  setMenuStates(prev => ({ ...prev, [index]: true }))
  setAnchorEls(prev => ({ ...prev, [index]: event.currentTarget }))
}

// 新增带索引的关闭函数
const handleClose = (index: number): void => {
  setAnchorEls(prev => ({ ...prev, [index]: null }))
}

渲染Menu时，使用当前索引对应的状态：

<Menu
  id={`basic-menu-${index}`}
  MenuListProps={{
    'aria-labelledby': `basic-button-${index}`,
  }}
  anchorEl={anchorEls[index]}
  open={Boolean(anchorEls[index])}
  onClose={() => handleClose(index)}
>

2. 修复闭包捕获的index值

有两种简单方式确保回调拿到正确的index：

• 直接传递参数：在回调中显式传递当前index的具体值，避免闭包引用问题：

<MenuItem
  disabled={steps[index]}
  onClick={() => handleComplete(index)}
>

• 拆分独立子组件：将每个步骤的按钮和菜单封装为独立组件，通过props传入index。子组件内部的状态和回调会绑定到各自的props，彻底规避父组件循环的闭包问题：

// 子组件示例
const StepMenuItem = ({ index, isDisabled, onComplete }: {
  index: number;
  isDisabled: boolean;
  onComplete: (idx: number) => void;
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const open = Boolean(anchorEl)

  return (
    <>
      <IconButton
        aria-label="more"
        id={`basic-button-${index}`}
        aria-controls={open ? `basic-menu-${index}` : undefined}
        aria-expanded={open ? 'true' : undefined}
        aria-haspopup="true"
        onClick={(e) => setAnchorEl(e.currentTarget)}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id={`basic-menu-${index}`}
        MenuListProps={{ 'aria-labelledby': `basic-button-${index}` }}
        anchorEl={anchorEl}
        open={open}
        onClose={() => setAnchorEl(null)}
      >
        <MenuList>
          <MenuItem><ListItemText>Edit{String(index)}</ListItemText></MenuItem>
          <MenuItem><ListItemText>Remove{String(index)}</ListItemText></MenuItem>
          <Divider />
          <MenuItem disabled={isDisabled} onClick={() => onComplete(index)}>
            <ListItemText>Complete{String(index)}</ListItemText>
          </MenuItem>
        </MenuList>
      </Menu>
    </>
  )
}

父组件中使用子组件：

<Stepper activeStep={activeStep} orientation="vertical">
  {Steps.map((step, index) => (
    <React.Fragment key={index}>
      <StepMenuItem 
        index={index} 
        isDisabled={steps[index]} 
        onComplete={handleComplete} 
      />
    </React.Fragment>
  ))}
</Stepper>

3. 修正ARIA属性逻辑

将aria-controls和aria-expanded改为依赖当前索引的锚点状态，确保无障碍属性正确：

<IconButton
  aria-label="more"
  id={`basic-button-${index}`}
  aria-controls={Boolean(anchorEls[index]) ? `basic-menu-${index}` : undefined}
  aria-expanded={Boolean(anchorEls[index]) ? 'true' : undefined}
  aria-haspopup="true"
  onClick={(event) => handleClick(event, index)}
>
  <MoreVertIcon />
</IconButton>

内容的提问来源于stack exchange，提问作者Minminmin