onMouseOver函数在mouseOver之前触发

Question

我试图有一个div，改变BarText的值时，它是悬停。在我的app.js中，我的值设置如下:

const [BarText, setBar] = useState("test")

这些值和函数作为道具传递给组件，代码如下:

<NavLink
to="/sol"
className="systemButton"
onClick={() => {
setIn(true);}}
onMouseOver={props.setBar('stuff')}
>

此时，该函数正在工作，因为它确实从"test"改变了BarText的值。"东西"，但是它不是在悬停时这样做，它似乎在渲染时这样做。当我刷新页面时，BarText已经读取为"Stuff"指示函数已经被触发。

当我将几个onMouseOver事件应用于不同的div时，BarText将更改为组件中的最后一个。

看来我没有正确使用onMouseOver。我犯了什么错误?

Answer 1

变化

onMouseOver={props.setBar('stuff')}

onMouseOver={() => props.setBar('stuff')}

否则，每次呈现时都要调用该函数。