我使用react-query
在React Native
中获取数据。我有一个查询屏幕。在这个屏幕中有两个查询
- useGrocertificate->返回最近10个通知
- useGrocerAllmenu->返回所有通知,包括最后10个通知
注意:这些查询具有不同的URL和查询键
默认情况下,useGrocerAllNotifications
查询是禁用的。页面中有一个称为Load All
的按钮。当用户单击此按钮时,我会启用useGrocerAllNotifications
查询并更新FlatList
数据,但有时不会重新呈现。
这是我的代码Notifications.tsx
个
export function GrocerNotifications() {
const [isPressedLoadAll, setIsPressedLoadAll] = useState(false)
const queryClient = useQueryClient()
const { data, refetch, isFetching } = useGrocerNotifications()
const {
data: allData,
refetch: allRefetch,
isFetching: isAllFetching
} = useGrocerAllNotifications({
enabled: isPressedLoadAll
})
const renderData = useMemo(() => {
if (Array.isArray(allData) && allData.length > 0 && isPressedLoadAll) return allData
if (Array.isArray(data) && data.length > 0) return data
return []
}, [allData, data, isPressedLoadAll])
const contentContainerStyle = useBottomSafeStyle(styles.contentContainer)
const handleLoadAllPress = useCallback(() => {
queryClient.invalidateQueries({ queryKey: ['grocer', 'notifications', 'all'] })
setIsPressedLoadAll(true)
}, [queryClient])
const renderItem: ListRenderItem<GrocerNotificationType> = useCallback(
({ item }) => (
<GrocerNotification
title={item.title}
description={item.description}
date={item.createdDate}
isNew={!item.isRecieved}
/>
),
[]
)
const keyExtractor = useCallback(
(item: GrocerNotificationType) => `grocer_notification_${item.id}`,
[]
)
const handleRefresh = useCallback(() => {
if (isPressedLoadAll) {
allRefetch()
return
}
refetch()
}, [refetch, allRefetch, isPressedLoadAll])
return (
<FlatList
data={renderData}
renderItem={renderItem}
style={styles.flatList}
contentContainerStyle={contentContainerStyle}
keyExtractor={keyExtractor}
refreshing={isFetching || isAllFetching}
onRefresh={handleRefresh}
/>
)
}
字符串
数据正在正确更新。我可以在控制台中看到新数据,但它没有反映到FlatList
有什么不对劲,但我不知道是什么。
下面是控制台日志
old data:
[
{
"id": 48,
"title": "7 kasım aykut 9"
},
{
"id": 47,
"title": "7 kasım aykut 8"
},
{
"id": 46,
"title": "7 kasım aykut 7"
},
{
"id": 45,
"title": "7 kasım aykut 6"
},
{
"id": 44,
"title": "7 kasım aykut 5"
},
{
"id": 43,
"title": "7 kasım aykut 4"
},
{
"id": 42,
"title": "7 kasım aykut 3"
},
{
"id": 41,
"title": "7 kasım aykut 2"
},
{
"id": 40,
"title": "7 kasım aykut 1"
},
{
"id": 39,
"title": "6 kasım aykut 3"
}
]
new data:
[
{
"id": 48,
"title": "7 kasım aykut 9"
},
{
"id": 47,
"title": "7 kasım aykut 8"
},
{
"id": 46,
"title": "7 kasım aykut 7"
},
{
"id": 45,
"title": "7 kasım aykut 6"
},
{
"id": 44,
"title": "7 kasım aykut 5"
},
{
"id": 43,
"title": "7 kasım aykut 4"
},
{
"id": 42,
"title": "7 kasım aykut 3"
},
{
"id": 41,
"title": "7 kasım aykut 2"
},
{
"id": 40,
"title": "7 kasım aykut 1"
},
{
"id": 39,
"title": "6 kasım aykut 3"
},
{
"id": 38,
"title": "6 kasım aykut 2"
},
{
"id": 35,
"title": "6 kasım aykut 1"
}
]
的数据
正如你所看到的,有两个新的项目与id 38和35
但是FlatList
keyExtractor
的行为很奇怪
以下是keyExtractor
日志
old keyExtractor data:
runs twice on mount I do not know why
{
"id": 48,
"title": "7 kasım aykut 9"
}
{
"id": 47,
"title": "7 kasım aykut 8"
}
{
"id": 46,
"title": "7 kasım aykut 7"
}
{
"id": 45,
"title": "7 kasım aykut 6"
}
{
"id": 44,
"title": "7 kasım aykut 5"
}
{
"id": 43,
"title": "7 kasım aykut 4"
}
{
"id": 42,
"title": "7 kasım aykut 3"
}
{
"id": 41,
"title": "7 kasım aykut 2"
}
{
"id": 40,
"title": "7 kasım aykut 1"
}
{
"id": 39,
"title": "6 kasım aykut 3"
}
{
"id": 48,
"title": "7 kasım aykut 9"
}
{
"id": 47,
"title": "7 kasım aykut 8"
}
{
"id": 46,
"title": "7 kasım aykut 7"
}
{
"id": 45,
"title": "7 kasım aykut 6"
}
{
"id": 44,
"title": "7 kasım aykut 5"
}
{
"id": 43,
"title": "7 kasım aykut 4"
}
{
"id": 42,
"title": "7 kasım aykut 3"
}
{
"id": 41,
"title": "7 kasım aykut 2"
}
{
"id": 40,
"title": "7 kasım aykut 1"
}
{
"id": 39,
"title": "6 kasım aykut 3"
}
new keyExtractor data:
runs twice too
{
"id": 48,
"title": "7 kasım aykut 9"
}
{
"id": 47,
"title": "7 kasım aykut 8"
}
{
"id": 46,
"title": "7 kasım aykut 7"
}
{
"id": 45,
"title": "7 kasım aykut 6"
}
{
"id": 44,
"title": "7 kasım aykut 5"
}
{
"id": 43,
"title": "7 kasım aykut 4"
}
{
"id": 42,
"title": "7 kasım aykut 3"
}
{
"id": 41,
"title": "7 kasım aykut 2"
}
{
"id": 40,
"title": "7 kasım aykut 1"
}
{
"id": 39,
"title": "6 kasım aykut 3"
}
{
"id": 38,
"title": "6 kasım aykut 2"
}
{
"id": 39, -> what happens here. Why does id 39 come again. This should be id 35 according to data
"title": "6 kasım aykut 3"
}
after this the data seems to revert back to old one ??
{
"id": 48,
"title": "7 kasım aykut 9"
}
{
"id": 47,
"title": "7 kasım aykut 8"
}
{
"id": 46,
"title": "7 kasım aykut 7"
}
{
"id": 45,
"title": "7 kasım aykut 6"
}
{
"id": 44,
"title": "7 kasım aykut 5"
}
{
"id": 43,
"title": "7 kasım aykut 4"
}
{
"id": 42,
"title": "7 kasım aykut 3"
}
{
"id": 41,
"title": "7 kasım aykut 2"
}
{
"id": 40,
"title": "7 kasım aykut 1"
}
{
"id": 39,
"title": "6 kasım aykut 3"
}
的字符串
我试过这些方法
- 使用
renderData
renderData.length
allData
allData.length
isPressedLoadAll
添加extraData
prop - 在不使用
react-query
的情况下获取数据并将数据保存到一个本地状态
没有运气。FlatList数据有时不更新。
有人能解释一下这里发生了什么吗?
1条答案
按热度按时间mdfafbf11#
我将react-native版本从0.71.7升级到0.72.6。看起来问题已经解决了。