ReactNative ListView mit Json Api

Question

Ich kann JSON-Daten in Listview nicht anzeigen. Ich bekomme JSON-Daten in console.log, aber nicht in ListView IsLoading ist immer auf falsch. Ich bekomme keine Fehler .catch (error => console.warn ("error")). Ergebnis auf dem Bildschirm ist zuerst Ansicht, weil this.state.isLoading ist falsch. Hier

ist ein Code:

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

ich ein paar Fehler hier zu sehen.

In Ihrem componentDidMount, setzen Sie datasource intead von dataSource:

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); 
    } 

Das ist, warum Sie nicht zu machen in der Lage, weil dataSource nie aufgefüllt wird. Es ist nur ein kleiner Schreibfehler.

Sie sind wahrscheinlich nicht in die zweite bekommen dann in Ihrem getTheData Methode, da Sie kein Versprechen der Rückkehr:

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")); 
    } 

Sie einen Fehler woth Ihre setState machen, Ihre zuweisen es insteaf es der Aufruf:

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

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

Lassen Sie mich wissen, ob es funktioniert.

Answer 2

Sie setzen die Funktion setState anstatt sie zu rufen

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

sollte

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