Plusieurs Axios Demandes En ReactJS État
J'ai donc été en plaçant le code suivant dans mon Réagir JS composant et je suis en fait, d'essayer de mettre les deux appels de l'API dans un état appelé vehicles
cependant 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 devine que je ne peux pas ajouter deux sources de données, comme je l'ai this.setState({ vehicles: seat.data + volkswagen.data })
cependant comment cela peut-il être fait? Je veux juste que toutes les données de l'API demande à être mis dans le même état.
L'erreur que je reçois:
TypeError: Cannot read property 'setState' of null(…)
Grâce
OriginalL'auteur Nick Maddren | 2016-07-22
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas "ajouter" tableaux d'ensemble. Utilisez le tableau.fonction concat (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) pour concaténer deux tableaux en un seul et ensuite en l'état.
OriginalL'auteur erichardson30
Il y a deux problèmes avec cette:
1) Dans votre .alors "ce" n'est pas définie, de sorte que vous aurez besoin de stocker une référence à ce à la couche supérieure.
2) Que l'autre réponse dit, vous ne pouvez pas ajouter des tableaux dans JS comme ça et que vous devez utiliser concat, même si depuis ils sont les réponses du serveur et j'aimerais ajouter une valeur par défaut aussi bien pour l'arrêter erroring si l'un des deux ne fait pas de vous retourner quelque chose.
Tous ensemble, je pense que ça devrait ressembler à ça:
OriginalL'auteur Ben Hare
Je veux parler de quelque chose de différent. Selon la réagir cycle de vie, vous devriez préférer l'appel de l'api dans
componentDidMount()
méthode."componentDidMount() est appelée immédiatement après un composant est monté. Initialisation qui nécessite des nœuds DOM devrait aller ici. Si vous avez besoin de charger des données à partir d'un point de terminaison distant, c'est un bon endroit pour instancier la demande du réseau."
https://reactjs.org/docs/react-component.html#componentdidmount
OriginalL'auteur yasinv
OriginalL'auteur Rinoyrix