React Native + Context + FlashList不会随着Context更新+ extraData更新

Question

问题:我有一个FlashList，使用React上下文来填充数据(数据是渲染视图的对象数组)，但当我更新FlashList的上下文和extraDataprop时，该列表不重新渲染，或有时重新渲染，或需要多个事件来实际重新渲染。

代码:

// 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的要求。

Answer 1

看起来对象被传递为extraData是一个布尔值。这意味着，如果前一个值为true，将其再次设置为true不会被视为更改。当你想要更新list时，可以使用一个对象来更新它。

试着设置extraData={{}}。如果一切工作如预期，这意味着你的更新逻辑有一些问题。

Answer 2

@Staghouse你的组件包含key属性，官方文档建议删除它:https://shopify.github.io/flash-list/docs/fundamentals/performant-components/#remove-key-prop:

"在你的物品和物品的嵌套组件中使用key prop会严重降低性能。

确保你的道具组件和它们的嵌套组件没有key prop。使用此道具将导致FlashList无法回收视图，失去使用它优于FlatList的所有好处。">

希望对你有帮助。