遍历State数组时MenuItem onClick始终获取最后一个索引的问题

问题根源 #

这是闭包陷阱导致的：map循环过程中，onClick的回调函数会捕获同一个index变量的引用，当循环结束后，index的值已经变成数组的最后一个索引，所有回调触发时都会拿到这个最终值。

可行解决方案 #

方案1：使用let声明块级作用域的index #

在map循环里用let声明index，确保每次迭代都创建独立的变量绑定：

{talks.map((talk, let index) => (
  <Card key={index}>
    <MenuItem onClick={() => menuUpdate(index)}>编辑</MenuItem>
  </Card>
))}

方案2：通过自定义DOM属性传递index #

把index存在MenuItem的自定义属性里，点击时从事件对象中获取：

{talks.map((talk, index) => (
  <Card key={index}>
    <MenuItem 
      onClick={(e) => menuUpdate(Number(e.target.dataset.index))}
      data-index={index}
    >
      编辑
    </MenuItem>
  </Card>
))}

注：如果MenuItem是封装组件，需要确保data-index传递到底层DOM元素，或者直接通过组件props传递index。

方案3：用bind提前绑定参数 #

通过Function.bind给回调函数提前绑定index参数：

{talks.map((talk, index) => (
  <Card key={index}>
    <MenuItem onClick={menuUpdate.bind(null, index)}>编辑</MenuItem>
  </Card>
))}

如果menuUpdate是类组件的方法，需要把第一个参数换成this以保证上下文正确。

方案4：函数组件结合useCallback缓存回调 #

函数组件中，用useCallback缓存回调并指定依赖，确保index被正确捕获：

{talks.map((talk, index) => {
  const handleClick = useCallback(() => {
    menuUpdate(index);
  }, [index]);
  
  return (
    <Card key={index}>
      <MenuItem onClick={handleClick}>编辑</MenuItem>
    </Card>
  );
})}

依赖数组必须包含index，确保index变化时生成新的回调。

额外提醒 #

• 尽量不要用index作为组件的key，数组项有唯一id时优先用id，避免数组重排导致的渲染异常。
• 类组件中要确保menuUpdate方法已正确绑定this（比如构造函数中bind，或用箭头函数定义方法）。

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