React Native问题：FlatList数据变更后未更新

核心问题分析 #

你的代码存在几个关键问题导致FlatList无法更新：

1. 状态不可变性破坏：用[...feedArray]做浅拷贝后，直接修改数组内对象的bookmarked属性，本质还是修改原对象的引用。React依赖状态的引用变化检测更新，浅拷贝后的数组引用虽变，但内部对象未变，React无法感知到变化。
2. 状态更新逻辑冗余无效：addFeedsToLocalDB里的setFeedArray([]); setFeedArray(cardsArray);会被React合并成一次更新，且若cardsArray和原feedArray内部对象引用一致，状态等于未变化。
3. useEffect循环触发+逻辑错误：依赖feedArray的useEffect会在状态更新后再次调用getCardsFromLocalDB，又更新状态形成循环；同时setFeedCards(feedArray)里的feedArray可能还是旧值，异步时序存在问题。
4. extraData使用不当：用count触发更新属于绕路操作，且count的更新依赖闭包中的旧值，逻辑本身有问题。

分步解决方案 #

1. 修复收藏状态更新的不可变性

修改updatebookMark函数，通过创建新对象保证状态不可变性：

const updatebookMark = () => {
  const id = item.cardId;
  // 用map生成全新数组，目标项创建新对象修改属性
  const newArray = feedArray.map(card => 
    card.cardId === id ? { ...card, bookmarked: bookmarkSelected } : card
  );

  addFeedsToLocalDB(newArray);
};

2. 简化本地存储与状态更新逻辑

AsyncStorage.setItem会自动覆盖旧值，无需先执行remove；直接用新数组更新状态：

const addFeedsToLocalDB = async cardsArray => {
  await AsyncStorage.setItem('feedArray', JSON.stringify(cardsArray));
  // 新数组是map生成的全新引用，React能检测到状态变化
  setFeedArray(cardsArray);
};

3. 修正数据初始化的useEffect逻辑

仅在组件挂载时加载本地数据，避免循环触发：

// 仅在组件首次挂载时获取本地存储数据
useEffect(() => {
  getCardsFromLocalDB();
}, []);

const getCardsFromLocalDB = async () => {
  const feedCards = await AsyncStorage.getItem('feedArray');
  if (feedCards) {
    const parsedCards = JSON.parse(feedCards);
    if (parsedCards.length > 0) {
      setFeedArray(parsedCards);
    }
  }
};

4. 正确配置FlatList的extraData

直接将extraData绑定到feedArray，状态更新时生成的新数组引用会触发FlatList更新：

<FlatList
  data={feedArray}
  extraData={feedArray}
  renderItem={({ item }) => <你的卡片组件 item={item} />}
  keyExtractor={item => item.cardId.toString()}
/>

关于之前的闪烁问题 #

你之前先设setFeedArray(null)再赋值，本质是强制状态引用变化触发全量渲染，FlatList会重新渲染所有卡片，因此出现闪烁。现在的方法仅会更新状态变化的卡片（依赖React的diff算法），不会产生闪烁。

内容的提问来源于stack exchange，提问作者deepanshi gupta