React Native (Redux) FlatList переходит в начало списка при вызове onEndReached

У меня есть FlatList в ReactNative, который извлекает список статей из API. Когда при прокрутке достигается конец списка, следующая страница статей извлекается из API и добавляется к списку статей в редукторе Redux.

FlatList настроен как:

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()}/>
   )};

Объект состояния Redux «статьи» отображается на компонент с помощью функции подключения React Redux. Соответствующий редуктор (некоторые элементы удалены для краткости) выглядит так:

/// 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, и в полезной нагрузке также есть дополнительная информация о подкачке (не важна для этой проблемы).

Все в порядке, API возвращает правильные данные.

Проблема в том, что когда при прокрутке достигается конец FlatList, вызывается API, новые статьи извлекаются и добавляются к объекту состояния this.props.articles и к FlatList, НО FlatList перескакивает / прокручивается обратно к первый элемент в списке.

Я думаю, что проблема, вероятно, в том, как я возвращаю состояние в редукторе Redux, но я не уверен, почему.

Правильно ли использовать concat для возврата нового состояния с добавленными новыми статьями?


person Graham    schedule 04.10.2018    source источник
comment
как вы объединяете данные, более подробная информация будет намного полезнее, также onEndReached будет вызываться несколько раз, что вы делаете, чтобы уменьшить это?   -  person Haider Ali    schedule 04.10.2018
comment
onEndReachedThreshold={0} кажется недействительным кодом, не так ли?   -  person Vinzzz    schedule 04.10.2018
comment
Он объединяется в редукторе в случае ARTICLES_SUCCESS. onEndReachedThreshold = {0}, насколько я могу судить, в порядке.   -  person Graham    schedule 04.10.2018
comment
попробуйте так {... состояние, загрузка: false, статьи: [... state.articles, ... action.payload.items]   -  person Nima    schedule 05.10.2018
comment
вы уже нашли решение этого?   -  person jpls93    schedule 04.11.2018
comment
какое-нибудь решение?   -  person Kasra    schedule 02.07.2020


Ответы (3)


Возможно, было уже слишком поздно отвечать на этот вопрос, но я столкнулся с той же проблемой, когда мои данные передавались от редукции к компоненту, и мне удалось исправить эффект прыжка, сделав мой компонент нормальным Component, а не PureComponent, что позволило мне использовать shouldComponentUpdate метод привязки жизненного цикла . Вот как должен выглядеть метод для вашего компонента:

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

   return true;
}

Этот метод (если он реализован) должен возвращать логическое значение, указывающее, должен ли компонент обновляться или нет. Я сделал здесь, чтобы предотвратить повторный рендеринг компонента в случае, если содержимое articles не изменилось.

Надеюсь, это будет полезно для вас или других, кто, возможно, столкнулся с подобной проблемой.

person Siavash    schedule 28.05.2019

Вам нужно добавить в стили listItem высоту и ширину. Замораживание и скачки, возможно, из-за того, что список пытался вычислить размеры для всех элементов, даже если они не отображаются.

И вы можете найти ответ в: https://github.com/facebook/react-native/issues/13727

person no_fate    schedule 14.11.2018

Использование FlatList в качестве компонента и добавление данных в качестве реквизита повторно отображает весь контент, поэтому он прокручивается вверх. Я рекомендую использовать его прямо на своей странице и изменять его данные с помощью this.state, а не props

person Nagibaba    schedule 22.08.2019
comment
дает тот же результат - person Kasra; 02.07.2020