时间戳

首页 > 解决方案 > 在 React 中使用 useState 和 useEffect 的无限循环

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

问题描述

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

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

但似乎发生了一个无限循环，[second] 只增加了一次，从 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);
}, []);

说真的，我还是没看清楚。谁能向我解释为什么？提前致谢！

标签： reactjsuse-effectuse-state

解决方案

查看您的代码，我认为问题在于 second 的值绑定为 0。

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

在这里，当您的组件挂载时，将执行 useEffect。那时您正在创建一个函数并将其传递给 setInterval。此函数将使用second创建时的值（等于 0）。所以每次 setInterval 运行时，它总是在执行setSecond(0+1)，它总是等于 1。

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

推荐阅读