Comment gérer les fetch API AJAX de réponse à Réagir

Je fais une simple requête AJAX avec l'extraction de l'API de Réagir, en particulier dans le componentDidMount() fonction.

Il est au travail, parce que la console s'affiche pour enregistrer le résultat. Cependant, je ne sais pas comment accéder à la réponse...

componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then(function(json) {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

   } //end componentDidMount

J'ai essayé d'accéder myData en dehors de la méthode de récupération, mais cela déclenche une erreur en disant qu'il n'est pas défini. Donc, il est seulement accessible dans le champ d'application de la fonction.

J'ai ensuite essayé ceci:

     .then(function(response) {
        let myData = response.json()
        //return myData;
        this.setState({
           data: myData
        })
     })

Ce temps, j'ai Cannot read property 'setState' of undefined(…)

Comment puis-je passer le chercher réponse à l'état, ou même simplement une variable globale?

Mise à JOUR

import React, { Component } from 'react';
import './App.css';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         data: null
      }
   }

   componentDidMount() {
      let URL = 'https://jsonplaceholder.typicode.com/users'  
         fetch(URL)
         .then( (response) => {
            let myData = response.json()
            //return myData;
            this.setState({
               data: myData
            })
         })
         .then( (json) => {
            console.log('parsed json', json)
         })
         .catch( (ex) => {
            console.log('parsing failed', ex)
         })
         console.log(this.state.data)
   } //end componentDidMount

  render() {
    return (
      <div className="App">
         {this.state.data}
      </div>
    );
  }
}

export default App;

OriginalL'auteur Paulos3000 | 2016-09-30

12

Vous avez deux questions aussi loin que je peux voir, response.json() renvoie une promesse, vous ne voulez pas définir myData à la promesse, au lieu de résoudre en premier la promesse et ensuite vous pouvez accéder à vos données.

Deuxième, this n'est pas dans le même champ d'application à l'intérieur de votre demande de récupération, de sorte que c'est pourquoi vous obtenez non défini, vous pouvez essayez d'enregistrer le champ d'application de this à l'extérieur de fetch:
```
var component = this;

fetch(URL)
 .then( (response) => {
    return response.json()    
 })
 .then( (json) => {
    component.setState({
       data: json
    })
    console.log('parsed json', json)
 })
 .catch( (ex) => {
    console.log('parsing failed', ex)
 })
 console.log(this.state.data)
```
Merci man! vous avez sauvé ma vie!
thnx beaucoup mec! j'ai perdu 3 heures pour la

OriginalL'auteur StackOverMySoul
7

setState est pas défini, parce que vous utilisez la fonction classique de la syntaxe à la place de la flèche de la fonction. Flèche fonction prend 'ce' mot-clé de "parent" de la fonction, un classique de la fonction() {} crée sa propre " ce " mot-clé.
Essayez cette
```
.then(response => {
    let myData = response.json()
    //return myData;
    this.setState({
       data: myData
    })
 })
```
OriginalL'auteur Tomasz Nowak
3

Vous êtes sur la bonne voie avec this.setState cependant this n'est plus dans le cadre de la composante lorsque vous appelez à l'intérieur de la fonction de la manipulation de la réponse. À l'aide d'un => fonction maintient le contexte de this.
```
fetch(URL)
    .then((res) => res.json())
    .then((json) => this.setState({data: json}));
```
Merci. Ce qui est logique, mais je suis toujours pas à obtenir le résultat souhaité. Veuillez prendre un coup d'oeil à ma mise à jour...
Vous êtes toujours référencement this dans le contexte de la réponse de gestionnaire et non dans le contexte de la composante. Vous devez lier le composant à votre fonction ou l'utilisation d'une graisse flèche de la fonction, afin de maintenir le contexte de cette.
- Je voir votre mise à jour. Vous avez déclaré que componentDidMount avec une flèche de la fonction. Essentiellement, cela signifie que les pauses de votre composant, parce que maintenant this à l'intérieur de la flèche fonction n'est plus dans le cadre de la composante. Vous devez le déclarer comme componentDidMount() {} comme vous l'avez fait avant. La réponse du gestionnaire de l'extraction de réponse est celui que l'on doit utiliser la flèche de la fonction.
Ne fonctionne toujours pas :/ Ont changé ma mise à jour... myData tient encore la null valeur que j'ai déclaré dans l'état d'initialisation...
Avez-vous essayé de rendu this.state.data dans votre render() méthode? Une fois que vous appelez this.setState({data: myData}), il va déclencher un rendu de votre composant. Aussi, si vous utilisez google Chrome, vous pouvez déboguer ce à l'aide de l'Réagissent extension Chrome Devtools. Il vous permettra de voir l'état de votre composant après l'appel à this.setState({data: myData}).

OriginalL'auteur Patrick Grimard

RÉAGIR NATIF

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';

export default class SampleApp extends Component {
constructor(props) {
super(props);
this.state = {
    data:  'Request '
    }
}

componentDidMount = () => {
fetch('http://localhost/replymsg.json', {
                      mode: "no-cors",
                      method: "GET",
                      headers: {
                        "Accept": "application/json"
                      },} )
                      .then(response => {
                      if (response.ok) {

                          response.json().then(json => {

                            console.warn( JSON.stringify(json.msg ));
                              this.setState({
                                 data: JSON.stringify(json)
                            })

                        });
                      }
                    }); 

}



render() { 
return (
    <Text>  {this.state.data}</Text>
    );
    }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);

FICHIER JSON
créer un fichier replymsg.json et de mettre ci-dessous le contenu et il devrait hôte à hôte local comme : http://localhost/replymsg.json

{"status":"200ok","CurrentID":28,"msg":"msg successfully reply"}

OriginalL'auteur Brijmohan Karadia

Changer la façon dont vous accédez à des données de réponse en utilisant '=>' à la place de la fonction dans le même contexte.

componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then((json) => {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

} //end componentDidMount

OriginalL'auteur Ye Yint

Vous devez lier contexte actuel de la fonction cible

fetch(URL)
         .then(function(response) {
            return response.json();
         })
         .then(function(json) {
            this.setState({data: json})
         }.bind(this))
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

OriginalL'auteur Floyd

Vous devez vous connecter pour publier un commentaire.