React Native :渲染获取的数据结构

Question

我是Javascript(NodeJS和JSON数据结构(和Reactnative的新手，我正在尝试在iOS屏幕测试(react native(上显示一些数据。我尽力理解，但我被困住了。

我在 localhost：3000 上的/places 上在我的 Express 应用程序上制作了一条 GET 路线：

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

但我得到的只是屏幕上的两个"0"。有人可以帮助我找出问题所在吗？什么是/是什么，* "结果"变量结构 ？似乎是JS对象的数组。* "response"和"responseJSON"变量？* "datas((" 和 dataSource 类型

我应该解析一些东西吗？我有点困惑。谢谢。

Answer 1

首先，"data"已经是复数了，没有"data:)s"。现在回到你的问题，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)});
}