React函数式组件中映射div的DOM节点内容获取及hover异常解决

你遇到的是闭包陷阱：在map循环绑定鼠标悬停事件时，事件回调引用的是同一个变量，循环结束后该变量指向数组最后一个元素，导致所有悬停事件触发时都会打印最后一项内容。以下是两种可行的解决方法：

方法一：直接在迭代中使用当前项（最简洁） #

import { useState } from "react";

export default function App() {
  const [list] = useState(["a", "b", "c", "d"]);

  return (
    <div className="App">
      {list.map((item) => (
        <div
          key={item}
          onMouseOver={() => console.log(item)}
          style={{ padding: "10px", border: "1px solid #ccc", margin: "5px" }}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

map的每一次迭代都会创建独立的作用域，这里直接在onMouseOver的箭头函数中引用当前迭代的item，每个回调都会绑定当前作用域的item值，不会出现共享变量的问题。

方法二：提取回调函数并绑定当前项 #

如果需要将悬停逻辑提取为单独的函数，可以用useCallback缓存回调，调用时传入当前项：

import { useState, useCallback } from "react";

export default function App() {
  const [list] = useState(["a", "b", "c", "d"]);

  const handleMouseOver = useCallback((item) => {
    console.log(item);
  }, []);

  return (
    <div className="App">
      {list.map((item) => (
        <div
          key={item}
          onMouseOver={() => handleMouseOver(item)}
          style={{ padding: "10px", border: "1px solid #ccc", margin: "5px" }}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

通过传入当前item作为参数，确保每个事件触发时传递的是对应元素的内容，避免闭包导致的变量共享问题。

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