如何在地图函数内的每次迭代中分配新的引用？

如何解决如何在地图函数内的每次迭代中分配新的引用？

我会尽可能使用CSS处理此问题，而不是处理JavaScript代码中的悬停问题。

如果在JavaScript代码中执行此操作，则可以通过为悬停的对象创建一个组件来解决此问题：

function MyImage({src, header}) {
    const [ref, hovered] = useHover();
    return (
        <div className="row imageSpace">
          {hovered && <h1>{header}</h1>}
          <img
            ref={ref}
            className="image"
            alt="fall"
            src={src}
          />
        </div>
    );
}

然后使用该组件：

return (
  <Wrapper>
    <Styles className="row">
      <Div className="col-xs-4">
        {data.map(item =>
          <MyImage
            key={item.sys.id}
            src={item.fields.image.file.url}
            header={item.fields.name}
          />
        )}
      </Div>

（显然，如果您愿意，可以配置更多的道具。）

解决方法

我不确定如何问这个问题，因为我仍然无法准确地描述问题。

我创建了一个useHover函数。在下面，您将看到我正在映射数据并渲染一堆照片。但是，useHover仅适用于第一次迭代。

我怀疑是因为我的推荐。这是如何运作的？我应该在每个迭代中创建一个新的引用吗？还是那是个错误的想法？

我怎样才能做到这一点？

这是我的useHover函数。

const useHover = () => {
  const ref = useRef();
  const [hovered,setHovered] = useState(false);

  const enter = () => setHovered(true);
  const leave = () => setHovered(false);

  useEffect(() => {
    ref.current.addEventListener("mouseenter",enter);
    ref.current.addEventListener("mouseleave",leave);

    return () => {
      ref.current.removeEventListener("mouseenter",enter);
      ref.current.removeEventListener("mouseleave",leave);
    };
  },[ref]);

  return [ref,hovered];
};

这是我的地图功能。如您所见，我已将引用分配给该图像。

问题：悬停时只有其中一张图像有效。

const [ref,hovered] = useHover();

  return (
    <Wrapper>
      <Styles className="row">
        <Div className="col-xs-4">
          {data.map(item => (
            <div className="row imageSpace">
              {hovered && <h1>{item.fields.name}</h1>}
              <img
                ref={ref}
                className="image"
                key={item.sys.id}
                alt="fall"
                src={item.fields.image.file.url}
              />
            </div>
          ))}
        </Div>