我在 React 函数组件中有一个搜索状态。
const [search, setSearch] = React.useState({
orgName: "",
repoName: ""
});
因此,当用户提交表单时。我需要从搜索对象中获取数据。我所做的是:
const handleSearch = (e) => {
e.preventDefault();
const {loading, data, error} = useQuery(SEARCH_REPO, {
variables : {orgName : search.orgName, repoName: search.repoName}
});
};
这违反了 react 钩子(Hook)第一规则。我得到的错误是 hooks cannot be used in non react functional component
。那么,有什么替代方法我该如何使用它。将 useQuery 放在 useEffect 钩子(Hook)中是否可以,它会在搜索对象更新时重新获取数据?
最佳答案
如果您需要执行查询以响应用户操作,例如按下按钮,您根本不应该使用 useQuery
-- 这就是 useLazyQuery是为了。 useLazyQuery
Hook 将返回一个元组(就像 useMutation
),它包含一个执行查询的函数和一个包含查询结果的对象。它的使用就像您使用 useMutation
一样,只是它不返回 Promise。
const [search, {loading, data, error}] = useLazyQuery(SEARCH_REPO, {
variables : {orgName : search.orgName, repoName: search.repoName}
});
const handleSearch = (e) => {
e.preventDefault();
search();
};
关于reactjs - 在 Apollo 中提交表单后,如何从 useQuery 钩子(Hook)中获取数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60927230/