réagir indigènes asynchrone en fonction renvoie la promesse, mais pas mes données json?

Je suis en train d'apprendre à réagir-native, et je suis en cours d'exécution dans un problème. Pourquoi ne l'obtention de données sur le retour d'une fonction async retour d'une promesse, mais dans l'asynchrone en fonction elle-même, elle correctement retourne un tableau d'objets?

Sur componentDidMount(), j'appelle ma fonction async qui à son tour fait une extraction d'une api url:

  componentDidMount() {
    let data = this.getData();
    console.log(data);    //<-- Promise {_40: 0, _65: 0, _55: null, _72: null}
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(data),
    })  
  }

  async getData() {
    const response = await fetch("http://10.0.2.2:3000/users", {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }   
        }); 
    const json = await response.json();
    console.log(json);     //<-- (5) [Object, Object, Object, Object, Object]
    return json;
  }

Dans console.log(json), j'obtiens la liste correcte des objets json, et je peux y accéder avec json[0].name. Mais plus tard, console.log(data) retourne une promesse avec impair de données:

Promise {_40: 0, _65: 0, _55: null, _72: null}

... et je ne trouve plus mes objets json. Pourquoi est-ce? Plus important encore, comment puis-je récupérer mes données json dans componentDidMount() afin que je puisse la définir comme dataSource?

async retour des fonctions de promesses. await comme par magie "déballe" cette promesse. let data = this.getData(); n'est pas (et ne peut pas utiliser) await, de sorte que vous avez à gérer la promesse de la façon "normale". Si vous n'êtes pas familier avec les promesses que je vous recommande de lire developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/... (ce qui n'a rien à voir avec réagissent natif btw, c'est du JavaScript).

OriginalL'auteur tempomax | 2017-07-19

  1. 4

    Une autre approche semblable à l'original du code de l'interlocuteur:

    async componentDidMount() {
    let data = await this.getData();
    console.log(data);    
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(data),
    })  
  }

    OriginalL'auteur itinance