React Native - FlatList值在数据更改时不更新

Question

我正在使用一个FlatList，它像任何社交媒体应用程序一样有卡片。每个卡片都是一个单独的组件。你可以在每张卡片上添加最爱。当我更新卡片上收藏夹的值时，列表根本不更新。我得到了最新的数组，但列表显示了旧的最爱值。

更新卡片组件收藏夹的代码

const updatebookMark = () => {
let newArray = [...feedArray];
let id = item.cardId;
const index = newArray.findIndex(object => {
return object.cardId === id;
});
if (index !== -1) {
newArray[index].bookmarked = bookmarkSelected;
addFeedsToLocalDB(newArray);
}
}

添加本地数据库

const addFeedsToLocalDB = async cardsArray => {
await AsyncStorage.removeItem('feedArray');
await AsyncStorage.setItem('feedArray', JSON.stringify(cardsArray));
setFeedArray([]);
setFeedArray(cardsArray);
};

这里setFeedArray是我使用上下文API更新的状态

如果更新setFeedArray([]);通过将其设置为空，然后为其添加值，然后使用最新值更新列表，但这会导致每次刷新列表和列表闪烁。

现在Flatlist代码:

从本地存储中获取数据

useEffect(() => {
getCardsFromLocalDB();
}, [feedArray]);
const getCardsFromLocalDB = async () => {
const feedCards = await AsyncStorage.getItem('feedArray');
if (JSON.parse(feedCards).length > 0) {
setCount(count + 1);
setFeedCards(feedArray);
}
}
};

在Flatlist中我使用了extraData来更新值，并使用了count

<FlatList
extraData={count}
data={feedCards}
scrollEnabled={true}
renderItem={({item, index}) => (
<RenderCard
item={item}
navigation={navigation}
index={index}
managePost={false}
isPaymentReport={false}
isBookmark={false}
previewMode={false}
isPinnedPost={false}
isPaymentExplorer={false}
/>
)}
numColumns={1}
keyExtractor={(item, index) => index}
contentContainerStyle={{
paddingBottom: height * 0.1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
}}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
onEndReachedThreshold={0.05}
onScrollBeginDrag={() => setLoadingMore(true)}
onEndReached={handleOnEndReached}
ListFooterComponent={() => loadingMore && <ListFooterComponent />}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => onRefresh()}
tintColor={Colors.light.black}
/>
}
/>

请帮

Answer 1

将本地存储数据(feedCards)放在useState中，然后它将更新。每次更新状态时，也可以更新本地存储。为了让组件呈现，需要改变状态或道具。

Answer 2

把这个改成

const addFeedsToLocalDB = async cardsArray => {
await AsyncStorage.removeItem('feedArray');
await AsyncStorage.setItem('feedArray', JSON.stringify(cardsArray));
setFeedArray([]);
setFeedArray([...cardsArray]);
};