FlatList 上拉加载更多只有刚进入界面的时候才出发一次



  • 这两天开始研究FlatList 之前一直用ListView.在网上也找了一些资料暂时没解决我的问题

    先贴一下代码
    render() {
    var data = [];
    for (var i=0; i<80; i++) {
    data[i] = {key: i, title: '第' + i + '行'}
    }
    return (
    <View style={{backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>

                <FlatList
                    ref={(flatList)=>this._flatList = flatList}
                    style={{backgroundColor: '#aaffaa', flex: 1, marginTop: 20}}
                    data={data}
                    ItemSeparatorComponent={this._separator}
                    renderItem={({item}) => this._renderItemView(item)}
                    onEndReachedThreshold={0.01}
                    onEndReached={this._onload}
                    onRefresh={this._onRefresh}
                    refreshing={true}
                />
    
            </View>
        );
    }
    

    _onload = (info) => {

        var data = this.state.data;
    
        console.log('上拉加载更多');
    
        this.setState({
            refer: true,
        });
     
    }
    

    如果这样写,上拉加载更多会正常执行,如果改成下面这样,上拉加载更多只在页面刚进入的时候才会加载一次_onload

    render() {

        return (
            <View style={{backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>
    
                <FlatList
                    ref={(flatList)=>this._flatList = flatList}
                    style={{backgroundColor: '#aaffaa', flex: 1, marginTop: 20}}
                    data={this.state.data}
                    ItemSeparatorComponent={this._separator}
                    renderItem={({item}) => this._renderItemView(item)}
                    onEndReachedThreshold={0.01}
                    onEndReached={this._onload}
                    onRefresh={this._onRefresh}
                    refreshing={true}
                />
    
            </View>
        );
    }
    

    能力有限,不知为何是这样,请各位大神给出解决问题的办法或问题出现的原因,谢谢



  • 这个,

     data={this.state.data}
    

    导致,FlatList 是 PureComponent,刷新条件是,当新的属性的 data 和旧的不同(指引用),或者extraData的值有变化,才能再次刷新,所以上面, 只能刷新一次,加一个 extraData 属性,当 extraData 改变的时候,都会刷新一次。



  • @tsfosnz 谢谢,已经试过了,确实如此


登录后回复