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

在此代码中应为useEffect依赖项添加什么？

1 个答案: