Автоматическое обновление Axios каждые 60 секунд с помощью Reactjs

Question

Я использую ReactJS в качестве библиотеки JavaScript и получаю данные в componentDidMount() с использованием axios. Эти полученные данные должны приниматься снова каждые 60 секунд. Какой самый эффективный и хороший способ сделать это?

componentDidMount() {
  const newGteeChartSeries = [];
  const newGteeChartCategories = [];
  const newmultiSelectOption = [];

  axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
    this.state.gteeChartSeries.map(() => {
      const data = [];

      res.data.map((item, index) => {
        data.push(item.gtee);
        newGteeChartCategories.push(item.isyeri);
        newmultiSelectOption.push({ id: item.id, isyeri: item.isyeri });
      });
      newGteeChartSeries.push({ name: "GTEE", data });
    });

    this.setState({
      teeTableData: res.data,
      gteeChartSeries: newGteeChartSeries,
      multiSelectOptions: newmultiSelectOption,
      gteeChartoptions: {
        ...this.state.options,
        xaxis: {
          categories: newGteeChartCategories
        }
      }
    });
  });
}

Answer 1

Один из способов сделать это - переместить логику выборки данных в отдельный метод и создать интервал, который будет вызывать этот метод каждые 60 секунд.

Убедитесь, что вы сохранили число, возвращаемое из setIntervalв экземпляре компонента, чтобы вы могли использовать clearInterval in componentWillUnmount.

Пример

class MyComponent extends React.Component {
  interval = null;

  componentDidMount() {
    this.interval = setInterval(this.getData, 60000);
    this.getData();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  getData = () => {
    const newGteeChartSeries = [];
    const newGteeChartCategories = [];
    const newmultiSelectOption = [];

    axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
      this.state.gteeChartSeries.forEach(() => {
        const data = [];

        res.data.forEach((item, index) => {
          data.push(item.gtee);
          newGteeChartCategories.push(item.isyeri);
          newmultiSelectOption.push({ id: item.id, isyeri: item.isyeri });
        });
        newGteeChartSeries.push({ name: "GTEE", data });
      });

      this.setState({
        teeTableData: res.data,
        gteeChartSeries: newGteeChartSeries,
        multiSelectOptions: newmultiSelectOption,
        gteeChartoptions: {
          ...this.state.options,
          xaxis: {
            categories: newGteeChartCategories
          }
        }
      });
    });
  };
}

Answer 2

Хорошо, давайте сделаем это с помощью обычного javascript setTimeInterval.

let intervalLoop = null; // a class variable
componentDidMount() {
  const newGteeChartSeries = [];
  const newGteeChartCategories = [];
  const newmultiSelectOption = [];
  
  this.intervalLoop = setInterval(()=>{
  axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
    this.state.gteeChartSeries.map(() => {
      const data = [];

      res.data.map((item, index) => {
        data.push(item.gtee);
        newGteeChartCategories.push(item.isyeri);
        newmultiSelectOption.push({
          id: item.id,
          isyeri: item.isyeri
        });
      });
      newGteeChartSeries.push({
        name: "GTEE",
        data
      });
    });

    this.setState({
      teeTableData: res.data,
      gteeChartSeries: newGteeChartSeries,
      multiSelectOptions: newmultiSelectOption,
      gteeChartoptions: {
        ...this.state.options,
        xaxis: {
          categories: newGteeChartCategories
        }
      }
    });
  });
  }, 60000);
}
// need to cleanup the timeinterval whenever we destroy the component
componentWillUnmount(){
clearInterval(this.intervalLoop)
}

Answer 3

Я бы предложил абстрагировать запрос API в его собственную функцию

componentDidMount(){
 setInterval(yourApiCallFn(),60000)
}

Answer 4

Вы можете обернуть все в функцию. Вызовите эту функцию в ComponentDidMount() и используйте setInterval(myFunction(), 60000) для вызова этой функции каждые 60 секунд