反应按钮OnHover更改数组内的图像

编程问答 2022-08-13

问题描述

我有一个动态组件，该组件具有三个按钮，每个按钮上都有不同的图像。我需要更改悬停按钮上的图像。我使用了onMouSEOver和onMouSEOut。它似乎可以正常工作，但是只要我将鼠标悬停在按钮上，它就会崩溃并显示错误：

TypeError: btn.map is not a function。

可能存在一些小的语法错误，但我无法弄清楚。

以下是同一代码的有效代码段：https://codesandbox.io/s/frosty-wood-fzop7

任何帮助纠正此问题的方法都非常感谢：）

解决方法

只需映射btn数组，然后返回一个带有悬停元素的新数组，该元素将用于更改图像src：

 const changeHover = (val,bool) => {
    setBtn(btn.map((ele,id) => id === val  ? { ...ele,hovered: bool} : ele));
  };
,

您正在设置错误的状态，您需要这样做：

const changeHover = (val,bool) => {
    console.log(val)
    setBtn((prevstate) => prevstate.map((ele,id) =>
    console.log("STATES",ele) || id === val
      ? { ...ele,hovered: bool }
      : { ...ele }
  ));
  };

以下是演示：https://codesandbox.io/s/bold-bush-w0zim

javascriptonhoverreactjsreactjsreactjsreactjs