ps怎么做网站首页图,高中生做网站网页,宁德古田建设局网站,自建站需要多少钱1. useQuery
useQuery的使用一、data是后端成功返回的数据#xff0c; 第一次的值为undefined
二、isLoading是指数据是否正在加载的状态#xff0c;通常用于判断请求是否还在进行中。当isLoading为true时#xff0c;表示数据正在加载中#xff0c;当isLoading为false时 第一次的值为undefined
二、isLoading是指数据是否正在加载的状态通常用于判断请求是否还在进行中。当isLoading为true时表示数据正在加载中当isLoading为false时表示数据加载完成。
三、isFetching是指数据是否正在进行更新的状态通常用于判断数据是否正在进行更新操作比如重新加载数据或者刷新数据。当isFetching为true时表示数据正在进行更新操作当isFetching为false时表示数据更新操作完成。
isLoading和isFetching的区别在于isLoading表示数据是否正在加载中而isFetching表示数据是否正在进行更新操作。可以说isLoading是isFetching的子集即当isFetching为true时isLoading一定为true但当isLoading为true时isFetching不一定为true。const {data, isFetching, isLoading} useQuery({// queryKey的robotList可以认为是这个useQuery的身份识别必须是唯一的后面携带的参数是用来控制是否触发查询如果条件不变则取缓存内的数据而不调用接口queryKey: [robotList, curPage, pageSize],queryFn: () ServiceWorkerRegistration.fetchRobotList({curPage: 1, pageSize: 20})
});
2. useMutation
// mutate是用来触发这个方法isPending是布尔值true为正在调用中false表示接口调用完成
const {mutate, isPending} useMutation({mutationFn: () services.fetchAddRobot({name: 机器人}),onSuccess: resp {// resp为后端返回值},onError: err {console.err(err);}
})
3. useQueryClient(结合useQuery和useMutation一起使用)
import {useQuery, useMutation, useQueryClient} from tanstack/react-query;function App(props) {const client useQueryClient();const {data, isFetching, isLoading} useQuery({// queryKey的robotList可以认为是这个useQuery的身份识别必须是唯一的后面携带的参数是用来控制是否触发查询如果条件不变则取缓存内的数据而不调用接口queryKey: [robotList, curPage, pageSize],queryFn: () ServiceWorkerRegistration.fetchRobotList({curPage: 1, pageSize: 20})});const {mutate, isPending} useMutation({mutationFn: () services.fetchAddRobot({name: 机器人}),onSuccess: resp {// resp为后端返回值if (resp.code 8) {// 创建成功后重新查询client.invalidateQueries({!-- 上方提到的useQuery的身份识别用途之一就是这里根据queryKey判断是否触发全部的useQuery如果存在值就只触发对应的useQuery --queryKey: [hello]})}},onError: err {console.err(err);}})return (div展示用法/div)
}
