Error: Invalid hook call. when calling hook after await - how do you await for data from one hook to instantiate into another?

Question

我试图在使用 swr 获取数据之前将 header 注入到我的获取器中。我需要等待自定义钩子响应数据，然后才能将其注入自定义获取程序。

如果我使用 promise.then，我知道我正在获取相关数据，如果我使用字符串手动注入它，它会起作用，我会看到 header。它只是在做异步

我应该怎么做？

代码：

    export const useApi = async (gql: string) => {
      const { acquireToken } = useAuth()
      await acquireToken().then(res => { graphQLClient.setHeader('authorization', `Bearer ${res.accessToken}`) })
      const { data, error } = useSWR(gql, (query) => graphQLClient.request(query));
      const loading = !data
      
      return { data, error, loading }

   }

Answer 1

首先，保持您的承诺一致，使用 async/await 或选择与 then 链接，但不能同时使用。如果你 await acquireToken() 你可以将它的值存储在变量中。此外，如果您选择 async/await 用 try/catch 块包装您的代码，以便正确处理错误：

    export const useApi = async (gql: string) => {
      const { acquireToken } = useAuth()

      try {
        const res = await acquireToken()
        graphQLClient.setHeader('authorization', `Bearer ${res.accessToken}`)
        const { data, error } = useSWR(gql, (query) => graphQLClient.request(query))
        const loading = !data
      
        return { data, error, loading }

      catch(error) {
        // handle error
      }
   }

Error: Invalid hook call. when calling hook after await - how do you await for data from one hook to instantiate into another?

Error: Invalid hook call. when calling hook after await - how do you await for data from one hook to instantiate into another?

reactjs

swr