如何解决React 查询失效在 React Native 中不起作用
如何在刷新页面后使数据失效?它似乎没有失效,而它应该是。即使服务器端发生了一些变化,它仍然显示旧数据。
我在将数据发布到后端时使用 useMutation 时遇到同样的问题,即使在使用 QueryClient
后 UI 也不会更新。
下面是我的代码:
const IncomeManager: React.FC<any> = (props) => {
const queryClient = new QueryClient();
const {isLoading,isError,isFetching,data}: QueryObserverResult = useQuery('typeIncomes',() => typesApi.getAllTypes());
const [refresh,setRefresh] = useState<boolean>(false);
const [isModalVisible,setIsModalVisible] = useState<boolean>(false);
//@ts-ignore
const handleClose = (): void => {
setIsModalVisible(false);
}
const refreshContent = async () => {
await queryClient.invalidateQueries('typeIncomes');
console.log("Content has been refreshed!!!");
}
return (
<View style={style.container}>
<View>
<AppText style={style.title}>{data ? data.length : 0} income types available</AppText>
</View>
<FixedButton
title={"plus"}
onPress={() => props.navigation.navigate(navConstants.ADDTYPE,{type: "incomes"})}
/>
{
isLoading || isFetching ? <PageActivityIndicator visible={isLoading || isFetching}/> :
<FlatList style={{width: "100%"}}
data={data}
renderItem={
({item}) => <CategoryItem
id={item.type_id}
title={item.title}
subTitle={item.description}
onLongPress={() => console.log("Very long press!")}
onPress={() => props.navigation.navigate(navConstants.EDITTYPE,{
item: {
id: item.type_id,title: item.title,description: item.description
}
})
}
/>
}
keyExtractor={item => item.type_id}
refreshing={refresh}
onRefresh={async () => refreshContent()}
/>
}
</View>
);
}
export default IncomeManager;
const style = StyleSheet.create({
container: {
flex: 1,width: "100%",backgroundColor: constants.COLORS.secondary,alignItems: "center"
},title: {
color: constant.COLORS.lightGray,paddingVertical: 10,fontSize: 17,marginBottom: 0
},});
解决方法
每次组件呈现时,您都在创建一个新的 QueryClient 执行以下操作:
const queryClient = new QueryClient()
queryClient 保存您的缓存,该缓存保存您的数据。应该只有一个(如 redux 存储)——您最初创建然后传递给 QueryClientProvider 的那个。要检索此 Singleton 实例,您可以执行以下操作:
const queryClient = useQueryClient()
它将通过 React 上下文为您提供实例。 那个 queryClient 应该可以工作的无效。这也是文档和所有示例中的所有内容的设置方式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。