Делайте вызов API каждые несколько секунд, используя Context API и React Hooks

Question

Можно ли установить интервал автообновления каждые несколько секунд при использовании Context API из React? Функция getData () запускает axios.get () в API, но, тем не менее, когда я пытаюсь установить setInterval () и очистить в функции возврата хука useEffect, она не очищает интервал. 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 });
  };

Answer 1

У меня была похожая проблема, и я использовал решение, описанное здесь: 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 интервал прекратится.