Question

我是Javascript（NodeJS＆amp; JSON数据结构）和React native的新手，我试图在iOS屏幕测试中显示一些数据（本机反应）。我尽力理解，但我被困住了。

我在我的Express应用程序/ localhost：3000上的/地方做了一个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

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

React Native：呈现获取的数据结构

1 个答案: