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,
},

]);

когда я нажимаю лайк, лайк увеличивается, но когда я прокручиваю вниз и возвращаюсь к посту, которому я понравился, я был сброшен

0 ответов

Другие вопросы по тегам