reactjs - 在 React 中使用 useState 和 useEffect 进行无限循环

Question

我想在每一秒之后增加状态 [秒] = [秒 + 1]。

const [second,setSecond] = useState(0);
useEffect(() => {
    const interval = setInterval(() => {
      setSecond(second+1)
    }, 1000);
    return () => clearInterval(interval);
}, []);

但是似乎出现了无限循环，[秒]只增加一次，从0到1，然后就停止运行了。

我更改了代码

setSecond(second+1)

至

setSecond((second) => {return second+1})

这个运行没有问题:

const [second,setSecond] = useState(0);
useEffect(() => {
    const interval = setInterval(() => {
      setSecond((second) => {return second+1})
    }, 1000);
    return () => clearInterval(interval);
}, []);

说实话，我还是没明白。有人可以向我解释为什么吗？提前致谢!

Answer 1

查看您的代码，我认为问题在于第二个值被绑定(bind)到 0。

const [second,setSecond] = useState(0);
useEffect(() => {
    const interval = setInterval(() => {
      setSecond(second+1)
    }, 1000);
    return () => clearInterval(interval);
}, []);

这里，当您的组件安装时，将执行 useEffect。此时，您正在创建一个函数并将其传递给 setInterval。该函数将使用创建时的秒值(等于 0)。因此，每次运行 setInterval 时，它都会执行 setSecond(0+1)，它始终等于 1。

您提到的正确方法是有效的，因为您给它一个函数，每次执行时该函数都会将状态的当前值传递给它。