带有 Json 对象的 CloneWithRows [英] CloneWithRows with Json Objects
本文介绍了带有 Json 对象的 CloneWithRows的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
错误:错误:对象无效,因为已找到 React 子项:键为 {id,image}
Error : Error: Objects are not valid as a React child found: object with keys {id,image}
如何将数据 ID 和图像正确呈现到列表视图中?
How do i properly render data id and image into listview?
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'NA', 'NA', 'NA', 'NA'
]),
paused: true,
}
}
componentWillMount(){
this._loadGroups();
}
loadGroups(){
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
fetch(`http://www.link.com/api/v1/list`)
.then(response => response.json())
.then(dataSource => this.setState({ dataSource:ds.cloneWithRows(dataSource), paused: true }))
.catch(err => console.log(err))
.done();
}
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
Json 数据格式如下
Json Data format as follows
{
"error": "0",
"data": [{
"id": 54,
"image": "url.jpg",
}]
}
推荐答案
这就是我要做的.
var DATA =[];
var REQUEST_URL = 'http://www.link.com/api/v1/list';
class MyScreen extends React.Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: dataSource.cloneWithRows(DATA),
}
}
componentWillMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData[0].data),
});
})
.done();
}
render() {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
renderRow(data) {
return (
<View>
<Image
style={[{height:100,width:100}]}
source={{uri: data.image}}/>
<View>
<Text>{data.id}</Text>
</View>
</View>
)
}
}
module.exports = MyScreen;
这篇关于带有 Json 对象的 CloneWithRows的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文