默认情况下,useQuery
会在调用它的组件挂载时立即发起数据获取,但并非所有人都希望这种行为。
方法一:启用布尔值
您可以设置一个名为 enabled
的键,并将其设为 false
,以此来改变默认行为,使其不会立即获取数据:
const { data } = useQuery("comments", fetchComments, {
enabled: false,
});
若要通过按钮触发数据获取,可以维护一个包含 true
或 false
的状态,并将 setEnabled
方法传递给按钮。点击按钮时,查询将获取数据。
const [enabled, setEnabled] = useState(false);
const { data } = useQuery("comments", fetchComments, {
enabled: enabled,
});
<button onClick={() => setEnabled(true)}>Some Button</button>
方法二:refetch()
我个人更倾向于使用 refetch
方法。这是 useQuery
提供的一个方法,更符合我们在此场景下所需的特性。
数据不会自动获取。我们已通过 enabled: false
关闭了自动获取。
然后我们可以将 refetch
方法传递给按钮,以便按需获取数据,无需切换任何状态。
export const useComments = () => {
const { data, refetch } = useQuery("comments", fetchComments, {
enabled: false,
});
return (
<button onClick={() => refetch()}>Some Button</button>
);
};