由于某些未知原因，ListView中的RefreshControl无法正常工作 [英] RefreshControl in ListView does not work for some unknown reason

问题描述

当我下拉刷新时出现错误.

I get an error when I pull down to refresh.

代码是这样的-

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

出了什么问题?我也无法在github上找到任何东西. 怎么了?我也无法在github上找到任何东西.

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.

已更新

嗨.感谢您在rnplay上创建示例.但是，我已将问题的原因缩小到此范围—每当我在render()中使用RefreshControl和ListView时，它就会按预期工作.但是，当我从诸如renderlistView()之类的其他函数中返回带有RefreshControl的ListView时，它会抛出上述错误.我什至尝试了this.loadData().bind(this)，但这也无济于事.

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.

推荐答案

您是否忘了绑定loadData函数? onRefresh={this.loadData.bind(this)}我看不到loadData函数本身无法判断，但这可能是原因.

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.

已更新

我已经在上面的代码中或多或少地遵循了一个工作示例(由于我没有完整的代码，因此简化了一些内容):

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

类似于您的示例，它是从服务器(这里是模拟json端点)获取数据，并使用结果来更新列表视图.

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

在设置状态之前，您能否检查cleanData是否已完全加载(在for循环和toJSON()调用之后)?

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

这篇关于由于某些未知原因，ListView中的RefreshControl无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！