React Native：渲染一个获取的数据结构

Question

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

我在我的 Express 应用上在 localhost:3000 的 /places 上创建了一条 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"}
]

然后我试图在我的原生 react 项目上渲染它：

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 对象数组。 *“响应”和“响应JSON”变量？ * "datas()" 和数据源类型

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

Answer 1

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