У меня есть 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
для возврата нового состояния с добавленными новыми статьями?
onEndReachedThreshold={0}
кажется недействительным кодом, не так ли? - person Vinzzz   schedule 04.10.2018