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