web-dev-qa-db-ja.com

反応ネイティブ非同期関数はpromiseを返しますが、jsonデータは返しませんか？

私は反応ネイティブを学んでおり、問題に直面しています。非同期関数からの戻り時にデータを取得するとプロミスが返されるのに、非同期関数自体ではオブジェクトの配列を正しく返すのはなぜですか？

componentDidMount()で、非同期関数を呼び出して、次に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;
  }
_

console.log(json)で、jsonオブジェクトの正しいリストを取得し、_json[0].name_でそれらにアクセスできます。しかし後で、console.log(data)は奇数データを含むプロミスを返します：

_Promise {_40: 0, _65: 0, _55: null, _72: null}
_

...そして、jsonオブジェクトが見つかりません。どうしてこれなの？さらに重要なことは、componentDidMount()でjsonデータを取得して、dataSourceとして設定できるようにする方法です。

javascriptreact-nativeasync-awaitecmascript-2017
14
tempomax

getData()は約束であるため、次のようにthenブロック内のデータを取得できるはずです。

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

質問者の元のコードに似た別のアプローチ：

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