React Native: визуализировать выбранную структуру данных

Question

Я новичок в Javascript (NodeJS & Структура данных JSON) и React native, и я пытаюсь отобразить некоторые данные на экране iOS screen test (реагировать на native). Я сделал все возможное, чтобы понять, но я застрял.

Я сделал маршрут 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> 
    ); 
} 

Но все, что я получил это два «0» на моем экране. Может кто-нибудь помочь мне узнать, что не так? Что такое /, * "result" переменная структура? представляется массивом объектов JS. * переменные "response" и "responseJSON"? * "datas()" и dataSource тип

Должен ли я что-нибудь разобрать? Я немного смущен. Спасибо.

Answer 1

Во-первых, «данные» уже множественные, нет «данных». :) Теперь вернемся к вашему вопросу, getData - это функция async, поэтому вы не можете просто позвонить getData() и ожидать немедленного возврата данных. В конструкторе установите источник данных для пустого списка, затем:

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