ReactNative ListView with Json Api

Question

listviewにjsonデータを表示できません。私はconsole.logでjsonデータを取得しますが、リストビューではisLoadingは常にfalseになります。 エラーが発生しません.catch（error => console.warn（ "error"））。 this.state.isLoadingがfalseであるため、画面の結果が最初に表示されます。ここで

はコードです：

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, ListView, Text, View,Image,TouchableHighlight } from 'react-native'; 

var productArray = []; 

class ListViewDemo extends Component { 
    constructor(props) { 
    console.warn("constructor"); 
    super(props); 
    var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid}); 
    this.state = { 
     dataSource: dataSource.cloneWithRows(productArray), 
    isLoading:true 
    } 
} 

    componentDidMount() { 
    console.warn("componentDidMount"); 
    this.getTheData(function(json){ 
    productArray = json; 
     console.warn(productArray); 
    this.setState = ({ 
     datasource:this.state.dataSource.cloneWithRows(productArray), 
     isLoading:false 
    }) 
    }.bind(this)); 
    console.warn("component -> " + this.state.isLoading); 
    } 

    getTheData(callback) { 
    console.warn("callback"); 
    var url = "https://raw.githubusercontent.com/darkarmyIN/React-Native-DynamicListView/master/appledata.json"; 
fetch(url) 
    .then(response => response.json()) 
    .then(json => callback(json)) 
    .catch(error => console.warn("error")); 
    } 

    renderRow(rowData, sectionID, rowID) { 
    console.warn("renderRow"); 
    return (
     <TouchableHighlight underlayColor='#dddddd' style={{height:44}}> 
     <View> 
     <Text style={{fontSize: 20, color: '#000000'}} numberOfLines={1}>{rowData.display_string}</Text> 
     <Text style={{fontSize: 20, color: '#000000'}} numberOfLines={1}>test</Text> 
     <View style={{height: 1, backgroundColor: '#dddddd'}}/> 
     </View> 
    </TouchableHighlight> 
); 
} 

    render() { 
    console.warn("render" + this.state.isLoading); 
    var currentView = (this.state.isLoading) ? <View style={{height: 110, backgroundColor: '#dddddd'}} /> : <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true}/> 
    return(
    <View> 
     {currentView} 
    </View> 
    ); 
    } 
} 

// App registration and rendering 
AppRegistry.registerComponent('AwesomeProject',() => ListViewDemo); 

Answer 1

私はここでミスのカップルを参照してください。あなたのcomponentDidMountで

、あなたはdataSourceのdatasource intead設定されています

componentDidMount() { 
    console.warn("componentDidMount"); 
    this.getTheData(function(json){ 
    productArray = json; 
     console.warn(productArray); 
    this.setState = ({ 
     //datasource:this.state.dataSource.cloneWithRows(productArray), 
     dataSource:this.state.dataSource.cloneWithRows(productArray), 
     isLoading:false 
    }) 
    }.bind(this)); 
    console.warn("component -> " + this.state.isLoading); 
    } 

dataSourceが移植されることはありませんので、あなたは、レンダリングすることができないしている理由です。それはちょっとしたスペルミスです。あなたが約束を返すされていないので、あなたはおそらくあなたのgetTheData方法で2番目に取得されていません

：あなたは、あなたのSETSTATE woth間違いを犯している

getTheData(callback) { 
    console.warn("callback"); 
    var url = "https://raw.githubusercontent.com/darkarmyIN/React-Native-DynamicListView/master/appledata.json"; 
    fetch(url) 
    //.then(response => response.json()) 
    .then(response => return response.json()) 
    .then(json => callback(json)) 
    .catch(error => console.warn("error")); 
    } 

を、あなたはそれを呼び出すinsteafを割り当てています。

//this.setState = ({ 
// datasource:this.state.dataSource.cloneWithRows(productArray), 
// isLoading:false 
//}) 

this.setState({ 
    dataSource:this.state.dataSource.cloneWithRows(productArray), 
    isLoading:false 
}) 

動作している場合はお知らせください。

Answer 2

あなたはそれを呼び出すのではなく、機能setStateを設定している

this.setState = ({ datasource:this.state.dataSource.cloneWithRows(productArray), isLoading:false })

は

this.setState({ datasource:this.state.dataSource.cloneWithRows(productArray), isLoading:false })