onViewableItemsChanged в FlatList не сохраняет предыдущее состояние с помощью оператора распространения
Я использую Flatlist
с опорой onViewableItemsChanged
и я меняю элементы в массиве, который отображается в списке Flat, но когда я прокручиваю вниз и перехожу к первому элементу, значение измененного ключа сбрасывается. Вот мой код
<FlatList
data={videos}
keyExtractor={(item, index) => item + index.toString()}
renderItem={renderPosts}
onViewableItemsChanged={onViewRef.current}
viewabilityConfig={viewConfigRef.current}
/>
Вот OnViewRef и viewConfigRef
const onViewRef = useRef((viewableItmes) => {
if (viewableItmes.viewableItems.length > 0) {
setVideos(
videos.map((item) => {
item.isPaused = true;
if (item.id === viewableItmes.changed[0].item.id)
return {
...item,
isPaused: !item.isPaused,
isVolumeVisible: !item.isVolumeVisible,
};
return item;
}),
);
}
});
const viewConfigRef = useRef({
itemVisiblePercentThreshold: 400,
waitForInteraction: true,
minimumViewTime: 5,
});
вот код, который я добавляю в пост
const toggleLike = (id) => {
setVideos(
videos.map((item) => {
if (item.id === id)
return {
...item,
liked: !item.liked,
claps:
item.liked === true
? parseInt(item.claps) - 1
: parseInt(item.claps) + 1,
};
return item;
}),
);
};
Вот мой массив
const [videos, setVideos] = useState([
{
id: 1,
status: 'success',
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
name: 'Zeeshan',
to: 'Ali Khan',
km: '2 km away',
time: '3 hours ago',
claps: 3000,
views: '300',
isPaused: false,
isMuted: true,
shares: '200',
isVolumeVisible: false,
liked: false,
},
{
id: 2,
status: 'success',
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
name: 'Zeeshan',
to: 'Ali Khan',
km: '2 km away',
time: '3 hours ago',
claps: '3000',
views: '300',
isPaused: true,
isVolumeVisible: false,
isMuted: true,
liked: false,
shares: '200',
},
{
id: 3,
status: 'error',
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
name: 'Zeeshan',
to: 'Ali Khan',
km: '2 km away',
time: '3 hours ago',
claps: '3000',
views: '300',
isPaused: true,
isVolumeVisible: false,
isMuted: true,
liked: false,
shares: '200',
},
{
id: 4,
status: '',
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
name: 'Zeeshan',
to: 'Ali Khan',
km: '2 km away',
time: '3 hours ago',
claps: '3000',
views: '300',
isPaused: true,
isMuted: true,
isVolumeVisible: false,
liked: false,
shares: '200',
},
{
id: 5,
status: 'error',
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
name: 'Zeeshan',
to: 'Ali Khan',
km: '2 km away',
time: '3 hours ago',
claps: '3000',
views: '300',
isPaused: true,
isMuted: true,
isVolumeVisible: false,
liked: false,
shares: '200',
},
{
id: 6,
status: '',
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
name: 'Zeeshan',
to: 'Ali Khan',
km: '2 km away',
time: '3 hours ago',
claps: '3000',
views: '300',
shares: '200',
isVolumeVisible: false,
isPaused: true,
isMuted: true,
liked: false,
},
]);
когда я нажимаю лайк, лайк увеличивается, но когда я прокручиваю вниз и возвращаюсь к посту, которому я понравился, я был сброшен