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

Question

我想在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",
    "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>

    );
  }
});

Answer 1

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