RefreshControl in ListView does not work for some unknown reason

我们两清 提交于 2019-12-08 07:53:44

问题


I get an error when I pull down to refresh.

The code is something like 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>
    )
},

What is going wrong? I'm not able to find anything on github either. What is going wrong? I'm not able to find anything on github either.

UPDATED

Hi. Thanks for creating a sample on rnplay. But I have narrowed down the cause of the problem to this- Whenever I use RefreshControl and ListView inside render() it works as expected. But when I return ListView with RefreshControl from some other function like renderlistView(), it throws the aforementioned error. I even tried this.loadData().bind(this) but that does not help either.


回答1:


Did you forget to bind your loadData function? onRefresh={this.loadData.bind(this)} I can't judge without seeing the loadData function itself, but that could be the reason.

Updated

I've made a working example more or less adhering to your code above (simplified some stuff since I don't have the full code): https://rnplay.org/apps/h-rK5g

Similar to your example, it's fetching data from a server (here a mock json endpoint) and using the result to update the listview.

Could you check that your cleanData is loaded fully (after the for loop and the toJSON() calls) before you set state?



来源:https://stackoverflow.com/questions/36472865/refreshcontrol-in-listview-does-not-work-for-some-unknown-reason

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!