React Native (Redux) FlatList, переходящий в начало списка при вызове onEndReached - PullRequest
Новая
       32

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

0 голосов
/ 04 октября 2018

У меня есть плоский список в 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 'Articles' сопоставляется с компонентом с помощью функции подключения 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 правильный способ вернуть новое состояние с добавленными новыми статьями?

Ответы [ 3 ]

0 голосов
/ 28 мая 2019

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

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

   return true;
}

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

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

0 голосов
/ 22 августа 2019

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

0 голосов
/ 14 ноября 2018

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

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

...