как очистить useEffect при использовании setInterval и fetch?

Question

Я перепробовал так много вариантов, но, похоже, ничего не решает проблему. Я все время получаю предупреждение «Не могу выполнить обновление состояния React для отключенного компонента». Я новичок в программировании, поэтому решение может быть для вас очень простым. Я попытался установить переменную внутри useEffect, чтобы знать, смонтирован ли компонент или нет, и обновляет состояние только в том случае, если значение переменной истинно, а затем устанавливает значение false внутри функции возврата. Я также пробовал использовать abortController, но оба случая у меня не сработали. Вот мой код:

import React, { useState, useEffect } from "react";
import CircularGraphs from "./CircularGraphs";
import Loader from "../components/Loader";

function Statistic(props) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState("");
  const getData = () => {
    fetch(`http://localhost:3009/statistic`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  };
  useEffect(() => {
    if (data === "") {
      setLoading(true);
      getData();
    } else {
      const interval = setInterval(() => {
        getData();
      }, 5000);
      return () => {
        clearInterval(interval);
      };
    }
  }, [data]);
  return (
    <div
      className={
        props.activeItem === 2 ? "second-item show" : "second-item hidden"
      }
    >
      <div className="sidebar-right-expanded-title">
        <h6>Estadistica</h6>
        <h5 className="sidebar-right-expanded-sucursal">Matriz</h5>
      </div>
      {loading ? (
        <Loader />
      ) : (
        <React.Fragment>
          <div className="graph-container">
            <div className="day-graph-container">
              <CircularGraphs percentage={data.today ? data.today : 50} />
              <p>NV-día</p>
            </div>
          </div>
          <div className="day-month-graph-container">
            <div className="previousday-graph-container">
              <CircularGraphs
                percentage={data.previousDay ? data.previousDay : 50}
              />
              <p>NV-día anterior</p>
            </div>
            <div className="month-graph-container">
              <CircularGraphs percentage={data.month ? data.month : 50} />
              <p>NV-mes</p>
            </div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

export default Statistic;

Answer 1

Так что я постараюсь помочь, рассказав, что я делаю в этих случаях:

1. const [data, setData] = useState(""); не делайте состояние по умолчанию как пустую строку, вместо этого сделайте имитацию, если u уже знаете объект, который вы получите что-то вроде

   const [data, setData] = useState({today: 50, previousDay: 50, month: 50});
   

2. Для lodaer вы можете установить загрузчик в getData, чтобы вы знали, что загрузчик запустится при вызове getData и он остановится когда у вас есть ответ или ошибка, и вы можете сделать интервал напрямую без тестирования, так как вам нужны данные каждые 5 секунд c

3. Вы можете использовать setTimout, если хотите, чтобы getData сработал один раз, поэтому вам не нужно очищать таймер

4. Если вы хотите, чтобы getData вызывалась каждые 5 секунд, вы должны выполнить очистку, я думаю, вы должны вернуть clearInterval (interval) ; (Я не уверен)