React-Native:在ListView中显示JSON数据
问题描述:
我想在ListView中显示JSON-Data。问题是,JSON数据包含字典。 在一行中,我想显示'Gattung','ab'和'bis'。 我不能够显示在ListView以下JSON-数据:React-Native:在ListView中显示JSON数据
[
{
"Gattung": "ICE",
"Zugummer": 26,
"ab": "Regensburg Hbf",
"bis": "Hanau Hbf",
"Wochentag": "Fr",
"Zeitraum": ""
},
{
"Gattung": "ICE",
"Zugummer": 27,
"ab": "Frankfurt(Main)Hbf",
"bis": "Regensburg Hbf",
"Wochentag": "So",
"Zeitraum": ""
},
{
"Gattung": "ICE",
"Zugummer": 28,
"ab": "Regensburg Hbf",
"bis": "Würzburg Hbf",
"Wochentag": "Fr",
"Zeitraum": ""
},
{
"Gattung": "ICE",
"Zugummer": 35,
"ab": "Hamburg Hbf",
"bis": "Puttgarden",
"Wochentag": "tgl.",
"Zeitraum": "25.06. - 04.09."
},
{
"Gattung": "ICE",
"Zugummer": 36,
"ab": "Puttgarden",
"bis": "Hamburg Hbf",
"Wochentag": "tgl.",
"Zeitraum": "25.06. - 04.09."
}
]
现在这是我的代码:
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var MainView = React.createClass ({
getInitialState() {
return {
jsonURL: 'http://demo.morgenrot-wolf.de/qubidu/test.json',
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
}
},
componentDidMount(){
this.loadJSONData();
},
loadJSONData() {
fetch(this.state.jsonURL, {method: "GET"})
.then((response) => response.json())
.then((responseData) =>
{
for (var i = 0; i < responseData.length; i++)
{
this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData[i]) });
}
})
.done(() => {
});
},
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
});
答
rowData是一个对象,你的名单应该是这个样子的所以renderRow财产
renderRow: function(rowData) {
return (
<View style={styles.row}>
<Text>{rowData.Gattung}</Text>
<Text>{rowData.ab}</Text>
<Text>{rowData.bis}</Text>
</View>
);
}
此外,在循环内调用setState是个坏主意。如果reponseData是一个数组,那么this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)});
就足够了。
+0
谢谢!它工作正常! –
+3
链接死亡现在:( – Alexis
显示一些代码,请 – Cherniv
@Cherniv编辑 –