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中使用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

您可以将所有内容包装在一个函数中。在ComponentDidMount()中调用该函数，然后每60秒使用setInterval(myFunction(), 60000)调用该函数

Answer 3

我建议将api请求抽象为自己的函数

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

Answer 4

让我们使用普通的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)
}

Axios使用Reactjs每60秒自动刷新一次

4 个答案: