React 按钮 OnHover 更改数组内的图像

Question

我有一个动态组件，它有三个按钮，每个按钮上都有不同的图像。我需要更改悬停按钮上的图像。我使用了 onMouseOver & onMouseOut。它似乎可以工作，但只要我将鼠标悬停在按钮上，它就会崩溃并出现错误：

TypeError: btn.map is not a function.

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

这是相同的工作片段：https://codesandbox.io/s/frosty-wood-fzop7

感谢任何纠正此问题的帮助:)

Answer 1

只需映射 btn 数组和 return 带有悬停元素的新数组，将用于更改图像源：

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

Answer 2

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

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

React 按钮 OnHover 更改数组内的图像

React button OnHover change image inside an array

javascript

onhover

reactjs