React Native：フェッチされたデータ構造をレンダリングする

Question

私はJavascript（NodeJS & JSONデータ構造）を初めて使用し、ネイティブに反応し、iOS画面テスト（ネイティブ対応）でいくつかのデータを表示しようとしています。私は理解するために全力を尽くしたが、私は立ち往生している。

私は、ローカルホスト上の場所/で私エクスプレスアプリのGETルートを作った：3000：

router.get('/places', (req, res) => { 
    MongoClient.connect(url, function (err, db) { 
     if (err) { 
      console.log('Unable to connect to the mongoDB server. Error:', err); 
     } else { 
      console.log('Connection established to', url); 

    var colPlaces = db.collection('places'); 

    colPlaces.find().toArray(function (err,result) { 
     if (err) { 
      res.send('error!'); 
     } else if (result.length) { 
      res.send(result); 
     } else { 
      res.send('No entries'); 
     } 
    }) 

    db.close(); 
}}); 
}) 

それは（JSONオブジェクトの配列のようです？）私のブラウザ上のデータ構造を表示する

[ 
{"_id":"5894fdd694f5d015dc0962bc","name":"The good bar","city":"London"}, 
{"_id":"5894fdd694f5d015dc0962bd","name":"Alpha bar","city":"Paris"} 
] 

私はその後、私のネイティブ反応のプロジェクトでそれをレンダリングしようとしています：

constructor(props) { 
    super(props); 

    var datas = async function getDatas() { 
     try { 
      let response = await fetch('http://localhost:3000/places'); 
      let responseJson = await response.json(); 
      return responseJson; 
     } catch(error) { 
      console.error(error); } 
    } 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.state = { 
     dataSource: ds.cloneWithRows(datas()) 
    }; 
} 

render() { 
    return (
     <View style={{flex: 1, paddingTop: 22}}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <Text>{rowData}</Text>} 
     /> 
     </View> 
    ); 
} 

しかし、私が得たすべては2です私の画面上で "0"。 誰かが私に何が間違っているかを知る手伝いをすることができますか？ とは、 * "result"可変構造ですか？ JSオブジェクトの配列のようです。 * "response"と "responseJSON"変数はありますか？ * "datas（）"とデータソースタイプ

何か解析する必要がありますか？私は少し混乱しています。ありがとうございました。

Answer 1

まず、「データ」は既に複数であり、「データ」はありません。 :)あなたの質問に戻ると、getDataは非同期関数なので、getData()を呼び出してすぐにデータを返すことはできません。コンストラクタで、dataSourceを空のリストに設定し、次に：

async function getData() { 
    try { 
     let response = await fetch('http://localhost:3000/places'); 
     return response.json(); // this call is not async 
    } catch(error) { 
     console.error(error); 
    } 
} 

componentDidMount() { 
    let data = await this.getData(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.setState({dataSource: ds.cloneWithRows(data)}); 
}