React-Native：在ListView中显示JSON数据

发布时间：2020-12-15 20:16:24 所属栏目：百科来源：网络整理

导读：我想在ListView中显示 JSON-Data.问题是,JSON数据包含字典. 在一行中,我想展示’Gattung’,’ab’和’bis’. 我无法在ListView中显示以下JSON数据： [{ "Gattung": "ICE","Zugummer": 26,"ab": "Regensburg Hbf","bis": "Hanau Hbf","Wochentag": "Fr","Zeit

我想在ListView中显示 JSON-Data.问题是,JSON数据包含字典.
在一行中,我想展示’Gattung’,’ab’和’bis’.
我无法在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","Zugummer": 28,"bis": "W??rzburg Hbf","Zugummer": 35,"ab": "Hamburg Hbf","bis": "Puttgarden","Wochentag": "tgl.","Zeitraum": "25.06. - 04.09."
},"Zugummer": 36,"ab": "Puttgarden","bis": "Hamburg Hbf","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)});应该够了.

检查此样本：https://rnplay.org/apps/4qH1HA

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!