Javascript 如何使用react钩子清除useffect中的setInterval

我正在尝试创建一个加载组件，它将定期向div添加一个周期，每1000ms使用setInterval in React。我正在尝试使用文档中描述的方法清理setInterval

import React，{useffect，useState}来自“React”
常量加载=（）=>{
常量[loadingStatus，setLoadingStatus]=useState（'.'））
const[loop，setLoop]=useState（）
useffect（（）=>{
设置循环（设置间隔（（）=>{
控制台日志（“加载”）
设置加载状态（加载状态+“）
}, 1000))
返回函数cleanup（）{
console.log（'cleaning'）
清除间隔（循环）
}
}, [])
返回（
{`Loading${loadingStatus}`}
）
}
导出默认加载

---

但是，loadingStatus变量只更新一次，即使在组件停止安装后，setInterval循环也不会被清除。我必须使用类组件来实现这一点吗？

依赖项是我们对React何时应该运行效果的提示，即使我们设置了一个时间间隔并且没有提供依赖项

[]

，React也不会知道我们想要再运行一次，因为我们的空依赖项

[]

中没有任何真正的变化

为了得到期望的结果，我们需要考虑何时运行效果

我们希望在

loadingStatus

更改时运行它，因此我们需要添加

loadingStatus

作为依赖项，因为我们希望在每次

loadingStatus

更改时运行该效果

我们有两个选择

添加

loadingStatus

作为我们的依赖项

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");
  const [loop, setLoop] = useState();

  useEffect(
    () => {
      setLoop(
        setInterval(() => {
          console.log("loading");
          setLoadingStatus(loadingStatus + ".");
        }, 1000)
      );

      return function cleanup() {
        console.log("cleaning up");
        clearInterval(loop);
      };
    },
    [loadingStatus]
  );

  return <p>{`Loading ${loadingStatus}`}</p>;
};

在此处阅读更多=>

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");
  const [loop, setLoop] = useState();

  useEffect(
    () => {
      setLoop(
        setInterval(() => {
          console.log("loading");
          setLoadingStatus(loadingStatus + ".");
        }, 1000)
      );

      return function cleanup() {
        console.log("cleaning up");
        clearInterval(loop);
      };
    },
    [loadingStatus]
  );

  return <p>{`Loading ${loadingStatus}`}</p>;
};

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");

  useEffect(() => {
    const intervalId = setInterval(() => {
      setLoadingStatus(ls => ls + ".");
    }, 1000);

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

  return <p>{`Loading ${loadingStatus}`}</p>;
};