Comment définir l'état de réponse d'axios dans react
comment définir l'état d'une réponse get dans axios?
axios.get(response){
this.setState({events: response.data})
}
5 réponses
Vous avez une erreur de syntaxe ici. Vous devriez essayer ceci à la place
var self = this;
axios.get('/url')
.then(function (response) {
console.log(response);
self.setState({events: response.data})
})
.catch(function (error) {
console.log(error);
});
//the rest of the code
var a = 'i might be executed before the server responds'
Il y a quelques choses à noter ici:
axios.getest une fonction d'asynchrone qui signifie que le reste du code sera exécuté .Et quand la réponse du serveur arrive, la fonction passée àthensera exécuté. La valeur de retour deaxios.get('url')s'appelle une promesse d'objet. Vous pouvez lire plus à ce sujet icithismot-clé a un valeur différente selon l'endroit où il est appelé.thisthis.setStatedevrait consultez le constructeur de l'objet, et lorsque vous appelezthisà l'intérieur d'une fonction, il se réfère à l'windowobjet. C'est pourquoi j'ai confiéthisà la variableself. Vous pouvez lire en savoir plus à ce sujet ici
conseil du Pro:
si vous utilisez ES6, vous voulez utiliser les fonctions arrow (qui n'ont pas leur propre this) et l'utilisation this.setState sans affectation this à une variable. plus à ce sujet ici
axios.get('/url')
.then((response) => {
console.log(response);
this.setState({events: response.data})
})
.catch((error)=>{
console.log(error);
});
Voici un exemple complet https://codesandbox.io/s/rm4pyq9m0o contenant les meilleures pratiques couramment utilisé pour récupérer des données, y compris le traitement des erreurs, réessayez et chargez. Cela fournit un meilleure expérience Utilisateur. On vous encourage à modifier le code et à jouer pour en savoir plus.
cela ne fonctionne pas parce que "ceci" est différent à l'intérieur d'axios. "ceci" à l'intérieur d'axios se réfère à l'objet axios, pas à votre composant react. Vous pouvez résoudre ce avec .lier
de plus, axios n'est pas utilisé correctement.
il devrait ressembler à quelque chose comme
axios.get("/yourURL").then(function(response) {
this.setState({ events: response.data });
}.bind(this));
alternativement si vous utilisez es6, vous pouvez désactiver la fonction pour une fonction de flèche et obtenir le même effet sans bind
axios.get("/yourURL").then(response => {
this.setState({ events: response.data });
});
il suffit d'essayer ce noeud js
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
si vous utilisez réagir js puis vous importez dans le composant que d'utiliser axios
comme ceci:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Faire quelque chose comme ceci:
var self= this; // self will now be referred to your component
axios.get("http://localhost:3001/get_user?id=" + id)
.then(function (response) {
if(response.data.rows != null)
user_detail = response.data.rows;
console.log(response);
self.setState({email: user_detail.name, name: user_detail.name})
})
j'ai eu affaire à des promesses similaires à celles du passé quand j'apprenais à réagir. Ce que j'ai fait c'est mettre l'appel api sur le componentDidMount méthode et définir l'État à une valeur initiale. J'ai utilisé un chargeur alors que les données soient récupérées.
componentDidMount() {
const self = this;
axios.get(response){
self.setState({ events: response.data });
}
A partir de Maintenant, j'utiliserais quelque chose de similaire à ce que checkenrode a dit.