web-dev-qa-db-fra.com

la fonction asynchrone native de react renvoie la promesse mais pas mes données json?

J'apprends React-Native et je rencontre un problème. Pourquoi le fait d'obtenir des données au retour d'une fonction asynchrone renvoie-t-il une promesse, mais dans la fonction async elle-même, elle renvoie correctement un tableau d'objets?

Sur componentDidMount(), j'appelle ma fonction asynchrone qui à son tour effectue une extraction vers une URL api:

  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) renvoie une promesse avec des données impaires:

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 de pouvoir les définir comme dataSource?

javascriptreact-nativeasync-awaitecmascript-2017
14
tempomax

Puisque getData() est une promesse, vous devriez pouvoir obtenir les données dans un bloc then comme suit:

componentDidMount() {
  this.getData()
    .then((data) => {
      this.setState({
        dataSource:this.state.dataSource.cloneWithRows(data),
      })  
    });
}
19
Anthony Ngene

Une autre approche similaire au code d'origine du questionneur:

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