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

Question

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

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

setInterval(func, 5000)

我没有按预期每 5 秒响应一次，而是每 10 秒收到两个响应，当我尝试按照我实际想要的方式转换为状态时，这个问题会变得更糟。

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

{
  "_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

这是因为您使用的功能组件实际上是组件的渲染函数。

每次重新渲染组件时(即每次更改状态时)都会执行它。

您需要将其封装在 useEffect 中带有一个空的依赖数组，如下所示:

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

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

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