reactjs - react - RefreshControl en ListView no funciona por algún motivo desconocido

react native scrollview not scrolling

Question

Aparece un error cuando lo abro para actualizar.

El código es algo como esto-

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

¿Qué está pasando mal? No puedo encontrar nada en Github tampoco. ¿Qué está pasando mal? No puedo encontrar nada en Github tampoco.

ACTUALIZADO

Hola. Gracias por crear una muestra en rnplay. Pero RefreshControl la causa del problema a esto: cada vez que uso RefreshControl y ListView dentro de render() funciona como se esperaba. Pero cuando devuelvo ListView con RefreshControl desde alguna otra función como renderlistView() , arroja el error antes mencionado. Incluso intenté this.loadData().bind(this) pero eso tampoco ayuda.

Answer 1

¿Olvidaste unir tu función loadData? onRefresh={this.loadData.bind(this)} No puedo juzgar sin ver la función loadData en sí, pero esa podría ser la razón.

Actualizado

He hecho un ejemplo de trabajo más o menos fiel a su código anterior (simplificado algunas cosas ya que no tengo el código completo): https://rnplay.org/apps/h-rK5g

De forma similar a su ejemplo, está obteniendo datos de un servidor (aquí un punto final simulado json) y utilizando el resultado para actualizar la vista de lista.

¿Podría verificar que su cleanData se haya cargado por completo (después del bucle for y de las llamadas toJSON ()) antes de establecer el estado?