Javascript “反应”按钮悬停在阵列内更改图像

我有一个动态组件，它有三个按钮，每个按钮上都有不同的图像。我需要更改悬停按钮上的图像。我使用了

onMouseOver

和

onMouseOut

。它似乎可以工作，但只要我将鼠标悬停在按钮上，它就会崩溃并出现错误：

TypeError:btn.map不是函数

可能有一些小的语法错误，但我无法理解

以下是相同的工作片段：

---

任何纠正这一点的帮助都非常感谢：）

只需映射

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 }
  ));
  };

---

这是演示：

你需要类似的东西吗？@BoussadjraBrahim是的。成功了。您能解释一下对函数的更改吗？您正在将

btn

的值从数组更改为具有

btn

属性的对象。这就是为什么在更新状态时，在

btn

上调用

.map（）

失败的原因。您需要更改

changehave

函数的实现，以便它正确更新状态。当

id==val

为false时，无需返回新对象。您可以按原样返回

ele

<代码>？{…ele，悬停：bool}：ele