Comment définir l'état de la réponse à partir d'axios dans react ?

Question

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

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

Answer 1

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 plusieurs 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 arrive, la fonction passée à la fonction then sera exécuté. La valeur de retour de axios.get('url') est appelé un objet de promesse. Vous pouvez lire Pour en savoir plus, cliquez ici
• this a une valeur différente selon l'endroit où il est appelé. this en this.setState debe fait référence à l'objet constructeur, et lorsque vous appelez this à l'intérieur d'une fonction, il fait référence à la window objet. C'est pourquoi j'ai assigné this à la variable self . Vous pouvez lire Pour en savoir plus, cliquez ici

Un conseil de pro :

Si vous utilisez ES6, vous voudrez utiliser les fonctions de flèche (qui n'ont pas leur propre this ) et utiliser this.setState sans attribuer this à une variable. Pour en savoir plus, cliquez 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 meilleures pratiques couramment utilisé pour récupérer des données, y compris la gestion des erreurs, la réessai et le chargement. Ceci fournit un une meilleure expérience utilisateur . Nous vous encourageons à modifier le code et à jouer avec pour obtenir plus d'informations.

Answer 2

Cela ne fonctionne pas parce que "this" est différent dans axios. "this" dans axios fait référence à l'objet axios, pas à votre composant react. Vous pouvez résoudre ce problème avec .bind

L'axios n'est pas non plus utilisé correctement.

cela 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 remplacer la fonction par une fonction flèche et obtenir le même effet sans liaison.

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

Answer 3

Essayez simplement ce node js

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

si vous utilisez react js vous devez d'abord importer dans le composant puis utiliser 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>
    )
  }
}

Answer 4

J'ai eu affaire à des promesses similaires dans le passé lorsque j'apprenais react. Ce que j'ai fait, c'est de placer l'appel à l'API sur le fichier componentDidMount et définir l'état à une valeur initiale. J'ai utilisé un chargeur pendant que les données étaient récupérées.

componentDidMount() {
 const self = this;
 axios.get(response){
  self.setState({ events: response.data });
}

Pour l'instant, j'utiliserais quelque chose de similaire à ce que checkenrode a dit.

Answer 5

Faites quelque chose comme ça :

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