Добрый день. Столкнулся с проблемой при добавлении новых элементов в массив, который используется для создания компонент и их рендера на странице.
Я фетчу с сервера массив с элементами (в нем 40 объектов), потом импорчу его в компоненту и использую для рендера дочерних компонент.
{
loading ? <Spinner /> : trendingGames.map(game => <GamePreviewItem game={game} key={game.id} />)
}
При этом, я хочу фетчить следующий массив с подобными же элементами, когда доскраливаю страницу до конца. Типо доскролил до футера и инициируется экшен, который фетчит следующий массив со следующими 40 элементами. И так далее. Ну и хочется, чтобы все вот эти сфетченные массивы использовались для создания дочерних компонент.
И это у меня сделать получилось, но когда доходит дело до следующего фетча (после скрола на самый низ страницы), у меня обновляется массив и компонента полностью ререндерится, а потом еще и скролится обратно в самый верх.
Вот так это происходит:
https://i.gyazo.com/3ca5dad6c6e34772b8e632b836638f...
То есть, когда изначальный массив обновляется (хотя это сути новый массив, ибо я использую деструктуризацию [...arr1, ...arr2]), страница становится пустой, крутится спиннер, а потом уже рендерится обновленной. Я видел на сайтах как-то делают, что после обновления массива все не ререндерится, а просто внизу появляются новые элементы, которые добавились в массив. И я хочу добиться такого же эффекта, но даже не знаю, как и что гуглить.
Для первого фетча при заходе на страницу и последующих фетчей при скролле я использую два разных экшена (может один надо):
case TrendingActionTypes.FETCH_TRENDING_SUCCESS:
return {
...state,
trendingGames: action.payload,
loading: false,
error: null
}
case TrendingActionTypes.FETCH_MORE_TRENDING_SUCCESS:
return {
...state,
trendingGames: [...state.trendingGames, ...action.payload],
loading: false,
error: null
}
То есть, я понимаю, почему компонента ререндерится. По сути ей приходит новый массив каждый раз, вот она и ререндерит одни и те же элементы. Но как это иначе сделать без понятия. Пробовал всякую фигню, аля пушить элементы последующих массивов в изначальный, но это, очевидно, не сработало.
Средний