当 onEndReached 调用时，React Native (Redux) FlatList 跳转到列表顶部 [英] React Native (Redux) FlatList jumping to top of list when onEndReached called

问题描述

我在 ReactNative 中有一个 FlatList，它从 API 中提取文章列表.当滚动到达列表末尾时，会从 API 中提取另一页文章，并将其附加到 Redux reducer 中的文章列表.

I have a FlatList in ReactNative which pulls a list of articles from an API. When the end of the list is reached on scrolling, a further page of articles is pulled from the API and appended to the articles list in a Redux reducer.

FlatList 设置为:

The FlatList is set up as:

render() {
    return(
    <FlatList data={this.props.articles.articles} // The initial articles list via Redux state
        renderItem={this.renderArticleListItem} // Just renders the list item.
        onEndReached={this.pageArticles.bind(this)} // Simply calls a Redux Action Creator/API
        onEndReachedThreshold={0}
        keyExtractor={item => item.id.toString()}/>
   )};

使用 React Redux 连接函数将 Redux 'articles' 状态对象映射到组件.相关的减速器(为简洁起见删除了一些项目)看起来像:

The Redux 'articles' state object is mapped to the component using the React Redux connect function. The relevant reducer (some items removed for brevity) looks like:

/// Initial 'articles' state object
const INITIAL_STATE = {
    articles: [],
    loading: false,
    error: '',
    pageIndex: 0,
    pageSize: 10
};

export default(state = INITIAL_STATE, action) => {
switch(action.type){
    // The relevant part for returning articles from the API
    case ARTICLES_SUCCESS:
        return { ...state, loading: false, articles: state.articles.concat(action.payload.items), 
            pageIndex: action.payload.pageIndex, pageSize: action.payload.pageSize}
   default:
       return state;
   }
}

有效载荷是一个简单的对象 - 文章包含在 action.payload.items 数组中，并且有效载荷中还有额外的分页信息(对于这个问题并不重要).

The payload is a simple object - the articles are contained in the action.payload.items array, and there is additional paging information as well in the payload (not important to this problem).

API 返回正确数据后一切正常.

Everything is fine with the API returning the correct data.

问题是，当滚动到达 FlatList 的末尾时，API 被调用，新文章被精细拉出并附加到 this.props.articles 状态对象和 FlatList，但 FlatList 跳转/滚动回列表中的第一项.

The problem is that when the end of the FlatList is reached on scrolling, the API is called, the new articles are pulled fine and appended to the this.props.articles state object and to the FlatList, BUT the FlatList jumps/scrolls back to the first item in the list.

我认为问题可能在于我如何在 Redux reducer 中返回状态，但我不确定为什么.

I think the problem is probably with how I am returning the state in the Redux reducer but I'm not sure why.

使用 concat 是返回附加新文章的新状态的正确方法吗?

Is using concat the correct way to return the new state with the new articles appended?

推荐答案

回答这个问题可能为时已晚，但我遇到了完全相同的问题，将我的数据从 redux 提供给组件，并设法通过使我的组件是一个普通的 Component 而不是 PureComponent 允许我使用 shouldComponentUpdate 生命周期钩子方法.这对于您的组件来说应该是这个方法的样子:

It might be too late to answer this but I experienced exact same problem having my data served from redux to the component and managed to fix the jumping effect by making my component a normal Component rather than PureComponent allowing me to use shouldComponentUpdate life-cycle hook method. This how the method should look like for you component:

shouldComponentUpdate(nextProps) {
   if (this.props.articles === nextProps.articles) {
       return false;
   }

   return true;
}

此方法(如果已实现)应返回一个布尔值，指示组件是否应更新.我在这里所做的是防止组件在 articles 的内容没有改变的情况下重新渲染.

This method (if implemented) should return a boolean value indicating whether the component should update or not. What i did here was to prevent the component from re-rendering in case the contents of articles hasn't changed.

希望这对您或其他可能遇到类似问题的人有所帮助.

Hope this would be helpful for you or others who might have faced similar problem.

这篇关于当 onEndReached 调用时，React Native (Redux) FlatList 跳转到列表顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！