【问题标题】:RefreshControl in ListView does not work for some unknown reasonListView 中的 RefreshControl 由于某些未知原因而无法正常工作
【发布时间】:2016-04-07 10:04:26
【问题描述】:

下拉刷新时出现错误。

代码是这样的-

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 上也找不到任何东西。

更新

嗨。感谢您在 rnplay 上创建示例。但我已将问题的原因缩小到这个范围 - 每当我在 render() 中使用 RefreshControlListView 时,它都会按预期工作。但是,当我从renderlistView() 等其他函数返回ListViewRefreshControl 时,它会引发上述错误。我什至尝试过this.loadData().bind(this),但这也无济于事。

【问题讨论】:

标签: reactjs react-native react-native-listview react-native-scrollview


【解决方案1】:

您是否忘记绑定您的 loadData 函数? onRefresh={this.loadData.bind(this)} 不看 loadData 函数本身就无法判断,但这可能是原因。

更新

我制作了一个或多或少遵循您上面的代码的工作示例(由于我没有完整的代码,因此简化了一些内容):https://rnplay.org/apps/h-rK5g

与您的示例类似,它从服务器(此处为模拟 json 端点)获取数据并使用结果更新列表视图。

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

【讨论】:

  • 好的。我会在一段时间内使用 loadData 编辑我的答案。但是,将 loadData 与 this 绑定会显示警告说不需要绑定。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-12-28
  • 1970-01-01
  • 1970-01-01
  • 2011-11-18
  • 2016-12-06
  • 2012-12-15
  • 1970-01-01
相关资源
最近更新 更多