React Native中Context更新后FlashList无法稳定重渲染问题

我使用React Context为FlashList填充数据（数据为渲染View的对象数组），但更新Context及FlashList的extraData属性后，列表无法稳定重渲染：有时不渲染，有时需多次操作才生效。

代码示例 #

// 导入语句均无问题

export default () => {
  // 相关Context
  const {
    cardsArray,
    cardsArrayFiltered,
    updateCardsArray,
    updateCardsArrayFiltered
  } = useContext(AppContext);
  
  // 相关状态
  const [didUpdateCards, setDidUpdateCards] = useState(false);
  const [cardsFilters, setCardsFilters] = useState([]);

  // 相关引用
  const flatListRef = useRef(null);
  
  // 组件挂载时的示例副作用
  useEffect(() => {
    setInitialAppState();
  }, []);
  
  // 监听数据变化并更新Context的副作用
  useEffect(() => {
      const newCardsArray = doSomeFiltering(cardsArray, cardsFilters);
  
      updateCardsArrayFiltered(newCardsArray);
      setDidUpdateCards(!didUpdateCards);
  }, [cardsFilters]);
  
  // 设置初始Context的异步函数示例
  const setInitialAppState = async () => {
    try {
      const newCardsArray = await getPromiseyCards();
  
      updateCardsArrayFiltered(newCardsArray);
      updateCardsArray(newCardsArray);
    } catch ( err ) {
      console.debug( err );
    }
  }
  
  // 列表项渲染函数
  const renderListItem = useCallback((list) => <Card key={list.index} card={list.item} />, []);
  
  // 列表键提取函数
  const listKeyExtractor = useCallback((item) => item.id, []);
  
  return (
    <FlashList
      ref={flatListRef}
      data={cardsArrayFiltered}
      extraData={didUpdateCards}
      keyExtractor={listKeyExtractor}
      renderItem={renderListItem}
      showsVerticalScrollIndicator={false}
      estimatedItemSize={Layout.window.height}
    />
  );
}

补充说明 #

• 未编写更新cardsFilters的函数、逻辑及视图，但上述副作用会在其变化时触发。
• 语句const newCardsArray = doSomeFiltering(cardsArray, cardsFilters);确实能返回正确的更新后数据。
• 已尝试通过didUpdateCards状态更新extraData，但问题依旧。

问题根源及修复方案 #

1. extraData依赖错误
   你用didUpdateCards作为extraData的做法不可靠：连续操作时可能出现状态反转，导致FlashList无法感知数据变化。正确的做法是直接绑定实际数据cardsArrayFiltered，因为FlashList需要监听的是数据源本身的变化。

修改FlashList的extraData属性：

<FlashList
  ref={flatListRef}
  data={cardsArrayFiltered}
  extraData={cardsArrayFiltered} // 直接绑定数据源
  keyExtractor={listKeyExtractor}
  renderItem={renderListItem}
  showsVerticalScrollIndicator={false}
  estimatedItemSize={Layout.window.height}
/>

同时可以删除didUpdateCards这个多余状态。

2. useEffect依赖缺失
   监听cardsFilters的useEffect中用到了cardsArray，但它不在依赖数组内。当cardsArray更新时，过滤逻辑不会触发，导致Context中的cardsArrayFiltered无法同步更新。

修正useEffect的依赖数组：

useEffect(() => {
    const newCardsArray = doSomeFiltering(cardsArray, cardsFilters);
    updateCardsArrayFiltered(newCardsArray);
}, [cardsFilters, cardsArray]); // 添加cardsArray到依赖列表

3. renderListItem的useCallback依赖与key问题

• renderListItem的useCallback依赖数组为空，若Card组件存在内部状态或props变化，会导致列表项无法正确重渲染，需补充依赖：

  const renderListItem = useCallback((list) => <Card key={list.item.id} card={list.item} />, [Card]);
  

• 避免用list.index作为列表项的key，改用item.id：index会随数据变化而改变，容易引发组件复用错误。

4. Context状态更新的不可变性检查
   确认doSomeFiltering返回的是新数组引用，而非修改原数组后返回。如果直接操作原数组，React会认为数据引用未变，Context不会更新，FlashList也不会触发重渲染。

确保过滤函数返回新数组：

// 正确示例：创建新数组后执行过滤
function doSomeFiltering(arr, filters) {
  return arr.filter(item => /* 过滤逻辑 */); // filter本身会返回新数组
}

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