Multiples demandes Axios dans ReactJS State

Question

Alors j'ai placé le code suivant dans mon composant React JS et j'essaie essentiellement de mettre les deux appels API dans un seul état appelé vehicles, cependant j'obtiens une erreur avec le code suivant :

componentWillMount() {

    // Faire une requête pour les données des véhicules

    axios.all([
      axios.get('/api/seat/models'),
      axios.get('/api/volkswagen/models')
    ])
    .then(axios.spread(function (seat, volkswagen) {
      this.setState({ vehicles: seat.data + volkswagen.data })
    }))
    //.then(response => this.setState({ vehicles: response.data }))
    .catch(error => console.log(error));
  }

Maintenant, je suppose que je ne peux pas ajouter deux sources de données comme je l'ai fait avec this.setState({ vehicles: seat.data + volkswagen.data }) mais comment cela peut-il être fait autrement ? Je veux juste que toutes les données de cette requête API soient placées dans un seul état.

Voici l'erreur actuelle que je reçois :

TypeError: Impossible de lire la propriété 'setState' de null(…)

Merci

Answer 1

Vous ne pouvez pas "ajouter" des tableaux ensemble. Utilisez la fonction array.concat (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) pour concaténer les deux tableaux en un seul, puis définissez cela comme état.

componentWillMount() {

   // Faire une demande de données de véhicules

   axios.all([
     axios.get('/api/seat/models'),
     axios.get('/api/volkswagen/models')
   ])
   .then(axios.spread(function (seat, volkswagen) {
     let vehicles = seat.data.concat(volkswagen.data);
     this.setState({ vehicles: vehicles })
   }))
   //.then(response => this.setState({ vehicles: response.data }))
   .catch(error => console.log(error));

}

Answer 2

Il y a deux problèmes avec cela :

1) Dans votre .then "this" est indéfini, donc vous devrez stocker une référence à this au niveau supérieur.

2) Comme l'autre réponse l'a indiqué, vous ne pouvez pas ajouter des tableaux ensemble en JS de cette façon et devez utiliser concat, bien que puisqu'ils sont des réponses du serveur, j'ajouterais également une valeur par défaut pour éviter une erreur si l'un d'entre eux ne vous renvoie rien.

Ensemble, je pense que cela devrait ressembler à :

componentWillMount() {

  // Faire une demande de données de véhicules
  var that = this;
  axios.all([
    axios.get('/api/seat/models'),
    axios.get('/api/volkswagen/models')
  ])
  .then(axios.spread(function (seat, volkswagen) {
    var seatData = seat.data || [];
    var volkswagenData = volkswagen.data || [];
    var vehicles = seatData.concat(volkswagenData);
    that.setState({ vehicles: vehicles })
  }))
  .catch(error => console.log(error));
}

Answer 3

Je veux mentionner quelque chose de différent. Selon le cycle de vie de React, vous devriez préférer appeler l'API dans la méthode componentDidMount().

"componentDidMount() est invoqué immédiatement après le montage d'un composant. L'initialisation qui nécessite des nœuds DOM devrait se faire ici. Si vous avez besoin de charger des données à partir d'un point d'extrémité distant, c'est un bon endroit pour instancier la requête réseau."

https://reactjs.org/docs/react-component.html#componentdidmount

Answer 4

constructeur(){
        super();
        this.state = {};
    }

    componentDidMount(){
        axios.all([
            axios.post('http://localhost:1234/api/widget/getfuel'),
            axios.post('http://localhost:1234/api/widget/getdatarate')
        ])
            .then(axios.spread((fuel,datarate) => {
                this.setState({
                    fuel:fuel.data.data[0].fuel,
                    datarate:datarate.data.data[0].data
                })
            console.log(this.state.fuel)
            console.log(this.state.datarate)

            }))
    }