web-dev-qa-db-fra.com

Comment définir l'état de réponse d'axios dans rea

Comment définir l'état d'une réponse get dans axios?

axios.get(response){
    this.setState({events: response.data})
}
reactjsaxios
37
jordanpowell88

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.get Est une fonction asynchrone, ce qui signifie que le reste du code sera exécuté. Et lorsque la réponse du serveur arrivera, la fonction transmise à then sera exécutée. La valeur de retour de axios.get('url') s'appelle un objet de promesse. Vous pouvez lire plus à ce sujet ici
  • Le mot clé this a une valeur différente selon l'endroit où il est appelé. this dans this.setState devrait faire référence à l'objet constructeur, et lorsque vous appelez this à l'intérieur d'un fonction, il fait référence à l’objet window. C'est pourquoi j'ai assigné this à la variable self. Vous pouvez lire plus d'informations à ce sujet ici

Astuce:

Si vous utilisez ES6, vous voudrez utiliser les fonctions de flèche (qui n'ont pas leur propre this) et utiliser this.setState Sans affecter 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ées pour extraire des données, notamment: erreur de gestion, essayez à nouveau et le chargement. Cela fournit une meilleure expérience utilisateur . Nous vous encourageons à modifier le code et à jouer pour obtenir plus d'informations à ce sujet.

112
Abdellah Alaoui

Cela ne fonctionne pas car "ceci" est différent à l'intérieur d'axios. "ceci" dans axios fait référence à l’objet axios, pas à votre composant de réaction. Vous pouvez résoudre ce problème avec .bind

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

Si vous utilisez es6, vous pouvez également utiliser la fonction flèche pour obtenir le même effet sans bind.

axios.get("/yourURL").then(response => {
  this.setState({ events: response.data });
});
25
ceckenrode

Essayez simplement ce noeud js

      axios.get(`https://jsonplaceholder.typicode.com/users`)
       .then(res => {
          const persons = res.data;
          this.setState({ persons });
      })

si vous utilisez react js alors vous importez d’abord en composant que vous utilisez axios

comme ça:

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>
    )
  }
}
1
Rizo