在 Useeffect 中使用 clearInterval() 无效。 setInterval() 中的 function 不断被调用

Question

预期结果：我从 API 获取脚本的状态，然后检查状态是什么。 如果状态 = 'XYZ'，我需要再次调用 getStatus function（使用 setInterval），否则我只需要返回/什么都不做。

问题：主要问题是 clearInterval() 不工作并且 getStatus() function 在提到的时间间隔（此处为 10 秒）后一次又一次地被调用，即使状态不等于“XYZ”。

请帮忙。 提前致谢。

const [intervalId, setIntervalId] = useState();

useEffect(() => {
    getStatus();
  }, []);

  const getStatus = async () => {
    await getScriptStatus()()
      .then(response => {
        if (response.data[0].status == 'XYZ') {
          setIntervalId(
            setInterval(() => {
              getStatus();
            }, 10000)
          );
        }
        else
           return () => clearInterval(intervalId);
      })
      .catch(error => {
        errorMessage(error);
      });

更新：使用 React.useRef() 而不是 useState() 作为 intervalId 并在“if”条件下使用 setInterval() 之前清除间隔或我。 感谢您提供有用的答案。

Answer 1

使用setTimeout而不是使用setInterval 。

有关更多详细信息，请访问：有关 setTimeout 的文档

Answer 2

这里的主要问题很可能是您正在递归安装新的间隔：function 安装间隔调用 function 安装间隔等，有效地产生级联间隔。 这些或多或少是不可撤销的，因为它们的 ID 临时存在于 function scope 中，安装它们然后被丢弃。

您可以在这个沙盒中对您的代码稍作修改来观察它。

Answer 3

intervalId不需要是“状态”，而是存储作为 ref 而不是 state。

• 请注意，我将您的 function 从使用 .then .then().catch()更改为使用async/await 。
• 我认为你面临的问题是因为 React State 是异步的——当你试图访问intervalId的新值时， setIntervalId还没有更新intervalId

const intervalId = useRef(null);

const getStatus = async () => {
    try {
        const response = await getScriptStatus()()
        if (response.data[0].status == 'XYZ') {
            intervalId.current = setInterval(getStatus, 10000);
        }
        else return () => clearInterval(intervalId.current);
    } catch (error) {
        errorMessage(error);
    }
}

另一个建议：

getStatus function 不应充当 useEffect 函数，因为看到getStatus返回 function 会让人非常困惑。然后您需要回溯到“啊，这是一个 useEffect 函数……返回的 function 是清理 function .. “ - 不好.. 。

所以..我建议的选项：

• 将getState function 更改为仅 getStatus .. 然后当您从useEffect内部调用它时 - 还处理您想要返回 function 的情况（清理函数）
• 较少建议：将所有内容直接放在useEffect中。 并且由于您想使用async/await -> 创建一个自调用异步函数： useEffect(()=>{ (async () => { await func(); })(); }, []);

更新：

除此之外^你真的不需要setInterval （就像其他人所建议的那样）。 setTimeout就可以了。 但是如果函数可能在不同场合被调用，您可能仍然需要clearTimeout （从 clearInterval 更改）

Answer 4

更改return () => clearInterval(intervalId); 到这个clearInterval(intervalId); .