web-dev-qa-db-fra.com

Plusieurs requêtes Axios dans l'état ReactJS

J'ai donc placé le code suivant dans mon composant React JS et j'essaie essentiellement de mettre les deux appels d'API dans un état appelé vehicles mais j'obtiens une erreur avec le code suivant:

componentWillMount() {

    // Make a request for vehicle data

    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 j'ai this.setState({ vehicles: seat.data + volkswagen.data }) mais comment faire autrement? Je veux juste que toutes les données de cette demande d'API soient mises dans le même état.

Voici l'erreur actuelle que je reçois:

TypeError: Cannot read property 'setState' of null(…)

Merci

javascriptreactjsaxios
11
Nick Maddren

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, puis définir cela comme l'état.

componentWillMount() {

   // Make a request for vehicle data

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

}
16
erichardson30

Il y a deux problèmes avec ceci:

1) Dans votre fichier .then, ceci n'est pas défini, vous devrez donc stocker une référence à ceci dans la couche supérieure.

2) Comme l'autre réponse l'a dit, vous ne pouvez pas ajouter des tableaux ensemble dans JS comme ça et vous devez utiliser concat, bien que comme ce sont des réponses de serveur, j'ajouterais également une valeur par défaut pour éviter que l'erreur ne se produise si l'un ou l'autre ne fonctionne pas. t en fait vous rendre quelque chose.

Dans l'ensemble, je pense que cela devrait ressembler à:

componentWillMount() {

  // Make a request for vehicle data
  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));
}
2
Ben Hare

Je veux mentionner quelque chose de différent. Selon le cycle de vie de React, vous devriez préférer appeler 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 doit aller ici. Si vous devez charger des données à partir d'un point de terminaison distant, c'est un bon endroit pour instancier la demande réseau."

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

2
yasinv
constructor(){
        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)

            }))
    }
0
Rinoyrix