web-dev-qa-db-fra.com

Comment gérer l'API de récupération AJAX réponse dans React

Je fais une simple requête AJAX avec l'API d'extraction dans React, en particulier dans la fonction componentDidMount().

Cela fonctionne car la console semble 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 d'extraction, mais cela génère une erreur indiquant qu'elle est indéfinie. Donc, il n’est accessible que dans le cadre de la fonction. 

J'ai alors essayé ceci:

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

Cette fois, je reçois Cannot read property 'setState' of undefined(…)

Comment puis-je transmettre la réponse d'extraction à l'état, ou même simplement à une variable globale?

METTRE À 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;
javascriptjsonreactjsresponsefetch-api
5
Paulos3000

Autant que je sache, vous avez deux problèmes: response.json() renvoie une promesse. Par conséquent, vous ne voulez pas définir myData sur la promesse, mais résolvez-la d'abord, puis accédez à vos données.

Deuxièmement, this ne fait pas partie de la même étendue dans votre demande d'extraction. C'est pourquoi vous indiquez que vous devenez indéfini. Vous pouvez essayer d'enregistrer l'étendue de this outside 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)
12
StackOverMySoul

setState n'est pas défini, car vous utilisez la syntaxe de fonction classique à la place de la fonction flèche. La fonction flèche prend 'ce' mot-clé de la fonction 'parent', une fonction classique () {} crée son propre mot-clé 'this' . Essayez ceci

.then(response => {
    let myData = response.json()
    // return myData;
    this.setState({
       data: myData
    })
 })
7
Tomasz Nowak

Vous êtes sur la bonne voie avec this.setState; cependant, this n'est plus dans le contexte du composant lorsque vous l'appelez dans la fonction qui gère la réponse. L'utilisation d'une fonction => conserve le contexte de this.

fetch(URL)
    .then((res) => res.json())
    .then((json) => this.setState({data: json}));
3
Patrick Grimard

Changez la façon dont vous accédez aux données de réponse en utilisant '=>' au lieu de function pour être 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
1
Ye Yint

REACT NATIVE

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

JSON FILE Créez un fichier replymsg.json et mettez le contenu ci-dessous. Il doit héberger sur l'hôte local, par exemple: http: //localhost/replymsg.json

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

Vous devez lier le contexte actuel à 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)
         })
0
Floyd