javascript - 定期触发 react 效果

考虑以下简单的React组件，其效果是获取一些数据并将其保存为组件状态:

function MyComponent(props) {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("data.json");
      setData(await res.json());
    };
    fetchData();
  }, []);

  return (
    <></>
  )
}

将这种效果设置为定期运行(例如每分钟)的正确方法是什么？

它像用fetchData()替换setInterval(fetchData, 60)一样简单，还是我应该考虑的其他React特定注意事项？

最佳答案

是。

只需在卸载组件时确保执行clearInterval(useEffect()的返回)即可。

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch("data.json");
    setData(await res.json());
  };

  const t = setInterval(fetchData, 60000);

  return () => clearInterval(t); // clear
}, []);