每60秒重复调用React组件以自动刷新前端显示

Question

我有一个 React 组件，它从 Flask 后端提供的 url 获取数据，并使用该数据显示折线图。我想刷新前端的图表，而无需用户手动刷新页面。

代码是：

function Graph() {
  const [graphData, setGraphData] = useState([]);

  useEffect(() => {
    fetchGraphData();
  }, []);
  
  const fetchGraphData = async () => {
    const result = await fetch("url")
    const fetchedGraphData = await result.json();

    if(res.ok) {
      setGraphData(fetchedGraphData);
    }
  };

  return (
    <div>
      <Container>
        <LineChart>
        ....
        </LineChart>
      </Container>
    </div>
  );
}

我尝试在任何地方以及我能想到的任何方式使用setIntervaland setTimeout，但我根本无法让它工作。

我认为这setTimeout应该更好，因为它可以保证在再次执行之前等待服务器响应，而不是setInterval在出现延迟时对查询进行排队。

Answer 1

只需一个计时器即可实现该目标。

在你useEffect尝试写这个：

useEffect(() => {
const interval = setInterval(() => {
   fetchGraphData();
  },60*1000);
  return () => clearInterval(interval);
}, []);

作为回报，所有只是一个清理函数，以确保卸载组件后没有计时器运行。要了解有关清理功能的更多信息https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1