RefreshControl in ListView funktioniert aus einem unbekannten Grund nicht

Question

Ich bekomme einen Fehler, wenn ich zum Aktualisieren herunterziehen.

Der Code ist so etwas wie this-

loadData: function(){ 

    var _this = this; 
    this.API(); 

    //check if data is loaded 
    setTimeout(function(){ 
     if(_this.isMounted()){ 
      if(_this.state.loaded===false){ 
       _this.setState({ 
        isReloadRequired: true 
       }) 
      } 
     } 
    }, 10000); 
}, 
API: function(){ 

    var _this = this; 
    this.setState({ rawData: [], isReloadRequired: false, loaded: false, isRefreshing: true }); 

    Parse.Cloud.run('fetchBookingListForUserCloudFunction', { 
     user_id: Parse.User.current().getUsername() 
    }).then(

     function(result){ 
      var cleanData = []; 
      for(var i=0;i<result.length;i++){ 
       cleanData.push(result[i].toJSON()); 
      } 

      _this.setState({ 
       rawData: _this.state.rawData.concat(cleanData), 
       dataSource: _this.state.dataSource.cloneWithRows(cleanData), 
       loaded: true, 
       isReloadRequired: false, 
       isRefreshing: false, 
      }); 
     }, 
     function(error){ 
      _this.setState({ isReloadRequired: true, loaded: false, isRefreshing: false }) 
      console.log("[HOME API] Error: "+ JSON.stringify(error, null, 2)); 
     } 
    ); 
}, 
render: function(){ 
    return(
     {this.state.loaded ? this.renderListView() : this.renderLoadingView()} 
    ) 
}, 

renderListView: function(){ 
    if(this.state.rawData.length === 0){ 
     return(
      <View style={styles.container}> 
       <Text>Tap to book.</Text> 
      </View> 
     ); 
    } 
    return(
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderReservation} 
      style={styles.listView} 
      refreshControl={ 
       <RefreshControl 
        refreshing={this.state.isRefreshing} 
        onRefresh={this.loadData} 
       /> 
      } 
     /> 
    );   
}, 

renderLoadingView: function(){ 
    return(
     <View style={styles.container}> 
      <LoadingView /> 
     </View> 
    ) 
}, 

Was nicht in Ordnung ist? Ich kann auch nichts auf GitHub finden. Was läuft falsch? Ich kann auch nichts auf GitHub finden.

Hallo AKTUALISIERT. Vielen Dank für die Erstellung eines Beispiels auf dem Bildschirm. Aber ich habe die Ursache des Problems auf diese eingegrenzt- Immer wenn ich RefreshControl und ListView innerhalb render() verwende, funktioniert es wie erwartet. Aber wenn ich ListView mit RefreshControl von einer anderen Funktion wie renderlistView() zurückgebe, wirft es den vorerwähnten Fehler. Ich habe sogar versucht this.loadData().bind(this), aber das hilft auch nicht.

Answer 1

Haben Sie vergessen, Ihre loadData-Funktion zu binden? onRefresh={this.loadData.bind(this)} Ich kann nicht beurteilen, ohne die loadData-Funktion selbst zu sehen, aber das könnte der Grund sein.

Aktualisiert

Ich habe ein funktionierendes Beispiel mehr gemacht oder weniger, um Ihren Code anhaftenden oben (vereinfacht einige Sachen, da ich nicht den vollständigen Code haben): https://rnplay.org/apps/h-rK5g

Ähnlich wie Ihr Beispiel Es ruft Daten von einem Server ab (hier ein Mock-JSON-Endpunkt) und verwendet das Ergebnis, um die Listenansicht zu aktualisieren.

Können Sie überprüfen, ob Ihre cleanData vollständig geladen ist (nach der for-Schleife und den toJSON() -Aufrufen), bevor Sie den Status setzen?