javascript React Native +上下文+ FlashList不会使用上下文更新+ extraData更新重新呈现

fcwjkofz  于 2023-01-04  发布在  Java
关注(0)|答案(1)|浏览(192)
    • 问题:**我有一个FlashList,它使用React Context填充数据(数据是呈现视图的对象数组),但当我更新FlashList的上下文和extraData属性时,列表不会重新呈现,或者有时会重新呈现,或者需要多个事件才能真正重新呈现。
    • 代码:**
// Many imports, they are all fine though

export default () => {
  // Relevant context.
  const {
    cardsArray,
    cardsArrayFiltered,
    updateCardsArray,
    updateCardsArrayFiltered
  } = useContext(AppContext);
  
  // Relevant state.
  const [didUpdateCards, setDidUpdateCards] = useState(false);
  const [cardsFilters, setCardsFilters] = useState([]);

  // Relevant refs.
  const flatListRef = useRef(null);
  
  // Example effect on mount
  useEffect(() => {
    setInitialAppState();
  }, []);
  
  // Effect that listen to changing on some data that update the context again
  useEffect(() => {
      const newCardsArray = doSomeFiltering(cardsArray, cardsFilters);
  
      updateCardsArrayFiltered(newCardsArray);
      setDidUpdateCards(!didUpdateCards);
  }, [cardsFilters]);
  
  // Example of promisey function that sets the initial context.
  const setInitialAppState = async () => {
    try {
      const newCardsArray = await getPromiseyCards();
  
      updateCardsArrayFiltered(newCardsArray);
      updateCardsArray(newCardsArray);
    } catch ( err ) {
      console.debug( err );
    }
  }
  
  // Renderer for the list item.
  const renderListItem = useCallback((list) => <Card key={list.index} card={list.item} />, []);
  
  // List key extractor.
  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属性,我认为这是重新呈现FlatList/FlashList的要求。

kqlmhetl

kqlmhetl1#

看起来对象作为extraData传递是一个布尔值。这意味着如果前一个值为true,再次将其设置为true将不算作更改。而是使用一个对象,并在您希望列表更新时更新它。
尝试设置extraData={{}}。如果一切都按预期工作,这意味着您的更新逻辑有一些问题。

相关问题