1
votes

Comment enregistrer un objet unique dans l'état, à partir de JSON End Point Axios

UPDATE:

{
    "localizedLastName": "King",
    "id": "fm0B3D6y3I",
    "localizedFirstName": "Benn"
}

^ a sauvé l'objet dans l'état pour moi :) Merci à tous !!

Je suis un débutant pour réagir. J'essaie d'enregistrer un seul objet d'un point de terminaison JSON dans l'état de mon composant de réaction. Je renvoie définitivement les données JSON dans la réponse. Cependant, il n'est pas enregistré dans l'État, pouvez-vous voir où je vais mal?

  // State needed for the component
  constructor(props) {
    super(props);
    this.state = {
      profile: {},
    };
  } 

 // Grabs profile data from the json url
  private getProfile() {
    let config = {
      headers: {'Authorization':'Bearer AQVVEqNXTWV....'}
    }
    axios
      .get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
      .then(response => 
          response.data(profile => ({
            id: `${ profile.id }`
         }))
        )
        .then(profile => {
          this.setState({
            profile
          });
        })
      // We can still use the `.catch()` method since axios is promise-based
      .catch(error => this.setState({ error, isLoading: false }));
  }

Données JOSN renvoyées:

axios
  .get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
  .then(response => {
    this.setState({profile: response.data})
  })

reactjs

2 commentaires

Obtenez-vous une erreur? Je peux essayer d'aider, mais j'ai besoin de plus de détails.

Qu'essayez-vous de faire dans le premier bloc puis? Je pense que c'est inutile. Pouvez-vous supprimer le premier bloc puis essayer?

3 Réponses :

1
votes

Votre premier bloc puis semble incorrect.

Essayez de faire console.log ici comme ceci:

.then(response => {
  console.log(response); // I am sure that you will get profile inside response.data or something similar
  return response.data(profile => ({
    id: `${ profile.id }`
  }));
})

0 commentaires

1
votes

Essayez de supprimer le second alors, comme ceci:

  axios
   .get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
    .then(response => {this.setState({ profile: response.data })};
    })
   }))

2 commentaires

Ahh ça ressemble à ce que je dois faire! J'obtiens une erreur via Uncaught (in promise) TypeError: response.data n'est pas une fonction

C'est parce que response.data c'est le fichier json pas une fonction, j'ai modifié le code, si response.data est les données JOSN retournées, probablement maintenant devrait fonctionner

1
votes

Si vous voulez garder votre premier alors que "prépare les données", alors vous devriez renvoyer une promesse au lieu de données, comme:

this.setState({profile: {id : response.data.id}});

Voici un exemple de la façon dont cela fonctionnerait:

Je pense que c'est un peu exagéré et que vous devriez pouvoir définir votre état dans le premier puis tel que:

let config = {
  headers: {'Authorization':'Bearer AQVVEqNXTWV....'}
}
axios
  .get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
  .then(response =>  {
      return new Promise((resolve, reject) => {
        resolve( {
          id: `${ response.data.id }`
        });  
      });
    }
  )
  .then(profile => {
    this.setState({
      profile
    });
  })
// We can still use the `.catch()` method since axios is promise-based
.catch(error => this.setState({ error, isLoading: false }));

0 commentaires