setInterval 在 React 应用程序中偶尔表现

Question

我正在尝试将一些数据投射到某个时间间隔的状态，我正在尝试制作一个每 x 秒更新一次的图表。

fuction func() {
    console.log('Hello, world!')
}

setInterval(func, 5000)

我没有像预期的那样每 5 秒响应一次，而是每 10 秒收到两个响应，当我尝试转换为我真正想要的状态时，这个问题变得更糟。

这是我的 API 调用的响应，我想做的就是将其转换为 state 并记录结果。


{
  "_id": "60d5e8a81a68bb7b14d9f3b0",
  "symbol": "LTC",
  "perc": "3.55",
  "createdAt": "2021-06-25T14:31:04.677Z",
  "updatedAt": "2021-06-25T14:31:04.677Z",
  "__v": 0
}

当我使用下面的代码时，它没有在双倍的时间内得到双倍的结果，而是完全失控了。


let [ltcArb, setLtcArb] = useState([]);

    const fetchLtcArbHandler = () => {
        fetch("/arb/ltc")
            .then((res) => res.json())
            .then((json) => setLtcArb((prev) => [{ perc: json.perc, time: json.createdAt },...prev,]))
            .then(console.log(ltcArb));
    };

    function poes() {
        console.log("poes");
    }

    setInterval(fetchLtcArbHandler, 5000);

我已经为此苦苦思索了几个小时，老实说昨晚失眠了。任何和所有帮助将不胜感激，请放轻松，我在这里仍然非常新。谢谢

Answer 1

那是因为您使用的是功能组件，它实际上是组件的 render 函数。

它会在您每次重新渲染组件时执行，因此每次您更改状态时都会执行。

你需要的是将它封装在一个 useEffect 中，并带有一个空的依赖数组，如下所示：

useEffect(() => setInterval(fetchLtcArbHandler, 5000), []);

此外，您需要 return 一个清理函数，否则即使组件被卸载，请求也会运行无限期地执行，同时由于潜在的闭包上下文引用也会导致内存泄漏：

useEffect(() => {
  const interval = setInterval(fetchLtcArbHandler, 5000);
  return () => clearInterval(interval);
}, []);

setInterval 在 React 应用程序中偶尔表现

setInterval behaving sporadically in React app

javascript

asynchronous

fetch

reactjs