React：settimeout 的回调没有更新状态值

Question

我想定期调用一个函数并更新其中的状态。

我从 useEffect 开始，但最终结束于here。我尝试使用 Ref.current 来存储间隔并每次在函数中清除它并重新创建它，但它仍然不起作用。像这样的东西

const drawBall = () => {
  clearInterval(intervalRef.current);
  // Access state and update it
  intervalRef.current = setInterval(drawBall, 1000);
}

我放弃了使用简单的 setTimeout 的想法。每次调用

drawBall

时，都会调用一个新的 Timeout，即使闭包取的是调用时的值，它仍然会具有更新后的值，因为调用时的值已更新。但它没有按预期工作，即使该值正在正确更新，该函数仍然会获取旧值。代码是这样的 -

const drawBall = () => {
 console.log(ballPos); // Shows initial value in every call (not the expected behaviour)
 setBallPos(prevVal => {
   console.log(prevVal); // Shows the right value
   return {
       x: prevVal.x + 2,
       y: prevVal.y + 2
   }
 });

 setTimeout(drawBall, 1000);
}

我在这里缺少什么？

Answer 1

要解决该问题并定期持续更新状态，您应该考虑使用 useEffect 钩子和 setInterval 来更新状态。 你可以这样尝试：

 const [ballPos, setBallPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const interval = setInterval(() => {
      setBallPos((prevPos) => ({
        x: prevPos.x + 2,
        y: prevPos.y + 2,
      }));
    }, 1000);

    return () => {
      clearInterval(interval); // it clean-up the interval on component unmount
    };
  }, []);