从JSON数据填充React-Native ListView

Question

React-Native amateur here, I've written a php api to retrieve data from a MySQL server, and I need to put this into a ListView to display on an app.

The code for showing this is:

 constructor(props) { super(props); var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); this.state = { dataSource: ds.cloneWithRows(this.props.response) }; } renderRow(rowData) { return ( <View style={styles.row}> <Text>{response}</Text> </View> ) } render() { return { <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}/> ); } } 

And the API json return is as follows:

[{"barcode":"50201600","name":"Cadbury's Creme 
Egg","tescoPrice":"1","sainsburysPrice":"1","asdaPrice":"1"},
{"barcode":"5034660520191","name":"Cadburys Twirl 4 
Pack","tescoPrice":"1","sainsburysPrice":"1","asdaPrice":"1"}]

The error I get is: Objects are not valid as a React child (found: object with keys {barcode, name, tescoPrice, sainsburysPrice, asdaPrice}). If you meant to render a collection of children, use an array instead. Check the render method of 'Text' Objects are not valid as a React child (found: object with keys {barcode, name, tescoPrice, sainsburysPrice, asdaPrice}). If you meant to render a collection of children, use an array instead. Check the render method of 'Text'

Any ideas?

Cheers

Answer 1

From the error i see, you need to change from:

 renderRow(rowData) { return ( <View style={styles.row}> <Text>{response}</Text> </View> ) } 

into something like:

  renderRow(rowData) { return ( <View style={styles.row}> <Text>{rowData.name}</Text> </View> ) }