React-Native：JSONデータをListViewに表示

Question

JSONデータをListViewに表示したい。問題は、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." 
} 
] 

これが今の私のコードです：rowDataがオブジェクトである

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

、あなたのリストのように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