onMouseOver 函数在 mouseOver 之前触发

问题描述

我试图让一个 div 在它悬停时改变 BarText 的值。 在我的 app.js 中，我设置了这样的值。

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

并将值和函数作为道具传递给此代码所在的组件。

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

目前，该功能正在运行，因为它确实将 BarText 的值从“test”更改为“stuff”，但是它不会在悬停时执行此操作，它似乎在渲染时执行此操作。当我刷新页面时，BarText 已读取为“Stuff”，表明该函数已被触发。当我将多个 onMouseOver 事件应用于不同的 div 时，BarText 将更改为组件中的最后一个。
看来我没有正确使用 onMouseOver，如果有人认为是我的错误或知道替代方法，我将不胜感激。提前致谢。

解决方法

改变

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

到

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

否则您每次渲染时都会调用该函数。