在 React 组件外部的 useEffect 钩子中创建的 clearInterval

Question

我有这段代码，我想从这个组件外部清除 clearInterval（假设我使用调用 clearInterval 函数的 onClick 方法呈现一个按钮）。我试图将间隔值作为参考传递，但是一旦状态更新，这个值就会改变。

  useEffect(() => {
    (intervalRef.current as ReturnType<typeof setInterval> | undefined) = setInterval(() => {
      fetch().then((items) => {
        items.forEach((item, id) => {
         // set state based on the values
        });
      });
    }, 5000);

    return () => clearInterval(intervalRef.current);
  }, [state]);

我也收到了 return () => clearInterval(intervalRef.current) 的 eslint 警告，所以我假设它也不会在这个方法中正确清除。

"ref 值 'intervalRef.current' 可能会在这个 effect 清理函数运行时发生变化。如果这个 ref 指向一个由 React 渲染的节点，复制 'intervalRef.current' 到 effect 中的一个变量，并在清理函数中使用该变量。"

React 中此类问题的正确处理方法是什么？

Answer 1

useEffect(() => {
    const intervalId = setInterval(() => {
      fetch().then((items) => {
        items.forEach((item, id) => {
         // set state based on the values
        });
      });
    }, 5000);

    return () => clearInterval(intervalId);
}, [state]);

如果您只想在卸载时清除间隔，则无需将其设为引用。只需将其分配给一个变量并将其传递给您的清理函数即可。

注意：我看到您正计划在 promise 中进行状态更新。您可能运行遇到卸载组件然后触发尝试更新状态的 promise 回调的问题。所以也许放一个 isMounted 检查

Answer 2

"The ref value 'intervalRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'intervalRef.current' to a variable inside the effect, and use that variable in the cleanup function."

这是说要在 useEffect 钩子的回调闭包中保存对 ref 值的引用，以在清理函数中使用。

useEffect(() => {
  (intervalRef.current as ReturnType<typeof setInterval> | undefined) = setInterval(() => {
    fetch().then((items) => {
      items.forEach((item, id) => {
       // set state based on the values
      });
    });
  }, 5000);

  const timerId = intervalRef.current;

  return () => clearInterval(timerId);
}, [state]);

如果您需要或想要从组件范围内的任何其他位置清除间隔，只需像通常使用当前引用值那样清除间隔即可：

clearInterval(intervalRef.current);

在 React 组件外部的 useEffect 钩子中创建的 clearInterval

clearInterval created in useEffect hook from outside React component

javascript

state

setinterval

reactjs

react-hooks