每隔几秒钟使用Context API和React Hooks进行一次API调用

问题描述 投票:0回答:1

使用React中的Context API时,是否可以每隔几秒钟设置一次自动刷新间隔? getData()函数在API上运行axios.get(),但是当我尝试在useEffect挂钩的return函数中尝试setInterval()和cleanup时,它不会清理间隔。 getData()将当前和加载变量设置为应用程序级别状态。

我只是想每隔几秒钟刷新并重新执行一次API调用。我尝试了useRef()挂钩,但仍能正常工作,但useEffect仍无法在完成间隔后清除间隔。

我想在组件的返回函数中访问当前属性,并在每次运行API调用时显示一些数据。

这里是代码:

const { loading, current, getData } = appContext;
  useEffect(() => {
    const interval = setInterval(() => {
      getData();
      console.log('updated');
    }, 1000);

    return () => clearInterval(interval);
  }, []); // eslint-disable-line // also tried without the []

getData()代码:

const getData = async () => {
    setLoading();

    const res = await axios.get(process.env.REACT_APP_APIT);

    dispatch({ type: GET_CURRENT, payload: res.data });
  };
reactjs react-hooks
1个回答
0
投票

我有类似的问题,我曾经在这里描述解决方案:https://overreacted.io/making-setinterval-declarative-with-react-hooks/

这是一个简单的示例:

import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

function App() {
  const [intervalTime, setIntervalTime] = useState(2000);

  useInterval(() => {
    // Do some API call here
    setTimeout(() => {
      console.log('API call');
    }, 500);
  }, intervalTime);

  return (
    <div className="App">
      <button onClick={() => setIntervalTime(2000)}>Set interval to 2 seconds</button>
      <button onClick={() => setIntervalTime(null)}>Stop interval</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用状态变量intervalTime,您可以控制间隔时间。通过将其设置为null,间隔将停止运行。

© www.soinside.com 2019 - 2024. All rights reserved.