在这段代码中，应该向useEffect依赖项添加什么

Question

这是我的代码。我只是在React组件中显示offsetX和offsetY。还使用addToStore()将其调度到Redux商店。我不确定应该向deps数组添加哪些值。我添加了dispatch，但有offsetX和offsetY状态。

function PageMouseMove () {
const dispatch = useDispatch()
const [offsetX, setOffsetX] = useState(0)
const [offsetY, setOffsetY] = useState(0)
useEffect(() => {
const mouseMove = ({ offsetX, offsetY }) => {
addToStore({ offsetX, offsetY })(dispatch)
setOffsetX(offsetX)
setOffsetY(offsetY)
}
window.addEventListener('mousemove', mouseMove)
return () => {
window.removeEventListener('mousemove', mouseMove)
}
}, [dispatch])
return (
<div>
X - {offsetX}, Y - {offsetY}
</div>
)
}

Answer 1

正如@Nicolai Mons Mogensen在评论中提到的，添加到useEffect(fn,[deps])方法的依赖项是将触发函数的变量。

我想补充的是，当变量发生变化时，useEffect函数将被触发。

您的函数看起来是正确的，但缺少一个结束的卷曲，我认为这是一个复制粘贴错误。

就我个人而言，我会更改钩子中的变量名以避免混淆。像这样：

function PageMouseMove() {
const dispatch = useDispatch();
const [offsetX, setOffsetX] = useState(0);
const [offsetY, setOffsetY] = useState(0);
useEffect(() => {
const mouseMove = ({ offX, offY }) => {
addToStore({ offsetX: offX, offsetY: offY })(dispatch);
setOffsetX(offX);
setOffsetY(offY);
};
window.addEventListener('mousemove', mouseMove);
return () => {
window.removeEventListener('mousemove', mouseMove);
};
}, [dispatch]);
}