定期触发React效果

Posted 2021-03-28

考虑以下简单的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特定的考虑？

答案

就像用setInterval（fetchData，60）替换fetchData（）一样容易吗？>>

是

仅在卸下组件时确保执行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
}, []);

另一答案

还有我应该考虑的其他特定于React的考虑吗？