5
votes

Actualisation automatique d'Axios toutes les 60 secondes avec Reactjs

J'utilise ReactJS comme bibliothèque javascript et j'obtiens les données dans componentDidMount () en utilisant axios . Ces données reçues doivent être reprises toutes les 60 secondes. Quelle est la manière la plus efficace et la plus efficace de procéder?

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
        }
      }
    });
  });
}

reactjs axios

0 commentaires

4 Réponses :

1
votes

Vous pouvez tout envelopper dans une fonction. Appelez cette fonction dans ComponentDidMount () , et utilisez setInterval (myFunction (), 60000) pour appeler cette fonction toutes les 60 secondes

Ci-dessous fonctionne sans erreur de syntaxe. fonction sans parenthèses

``componentDidMount()Â {
Â Â Â Â this.intervalÂ =Â setInterval(Â this.props.Details,Â 6000);
Â Â Â Â this.props.Details()
Â Â }
Â Â componentWillUnmount()Â {
Â Â Â Â clearInterval(this.interval);
Â Â }``

0 commentaires

1
votes

Je suggérerais de résumer la demande d'API dans sa propre fonction

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

0 commentaires

6
votes

Une façon de procéder consiste à déplacer la logique de récupération des données vers une méthode distincte et à créer un intervalle qui invoquera cette méthode toutes les 60 secondes.

Assurez-vous de stocker le numéro renvoyé par setInterval code> sur l'instance de composant afin que vous puissiez utiliser clearInterval dans 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
          }
        }
      });
    });
  };
}

0 commentaires

0
votes

Eh bien, faisons cela avec un javascript normal 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)
}

0 commentaires