是的,您的实现是正确的。当您将第二个参数作为具有skip属性的对象传递给查询时,它会阻止其在组件装载时的自动获取行为。
我用createApi:创建了端点
export const postsApi = createApi({
reducerPath: 'postsApi',
baseQuery: fetchBaseQuery({baseUrl: 'https://jsonplaceholder.typicode.com/'}),
tagTypes: ['Post'],
endpoints: builder => ({
getPosts: builder.query<Post[], void>({
query: () => '/posts',
providesTags: ['Post'],
}),
}),
});
export const {useGetPostsQuery} = postsApi;
如何仅在按下按钮而不在安装组件时在组件中使用挂钩useGetPostsQuery()
?
我试着把它添加到组件中,它是有效的,但我不确定这是否是最佳实践:
const [click, setClick] = useState<boolean>(true);
const {data, error, isLoading} = useGetPostsQuery(undefined, {skip: click});
将其与skip一起使用的方式是有效的。另一种方法是使用useLazyQuery钩子,它只在触发时调用。
const [trigger, result] = useLazyGetPostsQuery();
const handleClick = () => {
trigger();
console.log(result.data);
};
查看RTK查询创建者的回答https://stackoverflow.com/a/69098987/12945951
甚至官方文件也提出了同样的方法https://redux-toolkit.js.org/rtk-query/usage/conditional-fetching