- 问题:**我有一个FlashList,它使用React Context填充数据(数据是呈现视图的对象数组),但当我更新FlashList的上下文和
extraData
属性时,列表不会重新呈现,或者有时会重新呈现,或者需要多个事件才能真正重新呈现。
- 问题:**我有一个FlashList,它使用React Context填充数据(数据是呈现视图的对象数组),但当我更新FlashList的上下文和
- 代码:**
// 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的要求。
1条答案
按热度按时间kqlmhetl1#
看起来对象作为
extraData
传递是一个布尔值。这意味着如果前一个值为true,再次将其设置为true将不算作更改。而是使用一个对象,并在您希望列表更新时更新它。尝试设置
extraData={{}}
。如果一切都按预期工作,这意味着您的更新逻辑有一些问题。