Question

这是我的组件。

const DashboardContext = React.createContext()

function DashboardStateProvider({ children }) {
    const Provider = DashboardContext.Provider
    return (
      <WithSubscription Provider={Provider} connectedAccount={wallet.account}>
        {children}
      </WithSubscription>
    )
}

async function WithSubscription({ Provider, connectedAccount, children }) {
  const { data } =  await asyncCallHere()

  return ( <Provider value={{ treasury }}> {children} </Provider> )
}

function useDashboardState() {
  return useContext(DashboardContext)
}

export { DashboardStateProvider, useDashboardState }

在代码中，可以看到asyncCallHere。在此代码之前，asyncCallHere 是同步的，这意味着我在代码中没有错误。但是我需要它来实现异步，所以我不得不将 async 添加到 withSubscription 函数。希望代码有意义。

问题是因为我把 await 和 async 放在那里，导致了以下错误：

<块引用>

未处理的拒绝（错误）：无效的挂机调用。钩子只能是在函数组件的主体内部调用。这可能发生出于以下原因之一：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用程序中拥有多个 React 副本。有关如何调试和调试的提示，请参阅 Facebook 开发页面解决这个问题。

我很感激能快速回答解决这个问题，因为我不是 React 开发人员，除了修复它之外，我不打算深入了解那里发生的事情。

Answer 1

钩子不能异步。

你总是需要从钩子返回同步数据。

然而，如果你想在钩子内部做一些异步操作，你可以在 useEffect 内部进行，以将数据存储在钩子状态并从钩子本身返回该数据。

import React, {useEffect, useState} from 'react'

function useAsyncCallHere() {
  const [data, setData] = useState(null)

  useEffect(() => {
    async function getData() {
      const response = await asyncCallHere()
      setData(response.data)
    }

    getData()
  }, [])

  return data
}

function WithSubscription({ Provider, connectedAccount, children }) {
  const data = useAsyncCallHere()

  return ( <Provider value={{ data }}> {children} </Provider> )
}

react - 如何使钩子异步

1 个答案: