从React表单查询GraphQL
我有一个表格，在反应一个电子邮件和密码输入。当按下“登录”按钮时，我需要将请求发送到我在GraphQL中拥有的Api网关。
我尝试在组件外部创建一个函数，该函数作为参数接收email和password，并在urql库中使用Hook useQuery。问题是，我总是会得到错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这可能是因为以下原因之一：(您可能有React和renderer的版本不匹配(例如renderer)。你可能违反了胡克斯的规则。您可能在同一应用程序中有多个React副本，参见有关如何调试和解决此问题的提示)。
我尝试将前缀use添加到函数名中，以将其声明为自定义钩子，但是仍然得到相同的错误。
函数的全名是useLogin，它不返回任何元素，它只进行查询，如果凭据正确，我将令牌存储在localStorage中并将用户重定向到主页，否则，我会发出一个甜蜜的警告，指出用户或密码是不正确的。
有人知道我做错了什么吗？
或者有人能推荐我最好的方式来执行和构造这个查询？
P.S.我不使用阿波罗图书馆是因为一个bug。当我重新加载页面并键入用户名和密码并按下“登录”按钮时，它用以下形式发送了一个“空”查询：
{data: undefined, loading: false, error: undefined, networkStatus: 7, refetch: ƒ, …}
called: false
client: ApolloClient {resetStoreCallbacks: Array(0), clearStoreCallbacks: Array(0), link: HttpLink, cache: InMemoryCache, disableNetworkFetches: false, …}
data: undefined
error: undefined
fetchMore: ƒ ()
loading: false
networkStatus: 7
observable: ObservableQuery {observers: Set(1), subscriptions: Set(0), queryInfo: QueryInfo, queryManager: QueryManager, _subscriber: ƒ, …}
previousData: undefined
refetch: ƒ ()
reobserve: ƒ ()
startPolling: ƒ ()
stopPolling: ƒ ()
subscribeToMore: ƒ ()
updateQuery: ƒ ()
variables: {}
[[Prototype]]: Object随后，如果我再次按下按钮(不改变输入)，就会正确地发送带有数据的请求。
奇怪的是，如果我然后键入另一个用户和密码并再次按下按钮，那么在查询中发送的数据是上一个查询的相同数据，而不是我刚才在输入中输入的数据。
谢谢你抽出时间阅读：
回答 1
Stack Overflow用户
发布于 2022-10-20 21:33:51
我不知道具体原因，但“无效钩子调用”错误与我是老朋友。如果您还没有考虑到这个错误，我只能推荐react的官方文档：https://reactjs.org/warnings/invalid-hook-call-warning.html
简单地看一下urql ( package.json of urql，链接)，我觉得奇怪的是，这种反应并不是对等依赖，这可能是应该的。因此，您可以检查包中是否有多个react副本，因为这会导致错误。
https://stackoverflow.com/questions/74146343
复制相似问题
腾讯云开发者
