Question

这是我的反应组件..

const DashboardContext = React.createContext()

function DashboardStateProvider({ children }) {
  const wallet = useWallet()

  const Provider = DashboardContext.Provider

  if (wallet.account)
    return (
      <WithSubscription Provider={Provider} connectedAccount={wallet.account}>
        {children}
      </WithSubscription>
    )

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

async function WithSubscription({ Provider, connectedAccount, children }) {
  // Juror ANT balances, 24h ANT movements and claimed subscription fees
  const data = await apiCALL(connectedAccount)

  // bla bla bla code here
}

function useDashboardState() {
  return useContext(DashboardContext)
}

export { DashboardStateProvider, useDashboardState }

问题是当我在 async 函数上使用 withSubscription 时显示错误。这真的是强制性的，因为在其中，我正在进行异步调用 await apiCALL。

错误：

<块引用>

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

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用程序中拥有多个 React 副本，请参阅 react-invalid-hook-call 以获取有关如何调试和解决这个问题。

有什么想法吗？我必须解决这个问题，而且我不是 React 开发人员，所以我很感激直接回答要更改的内容。

更新：

如何使用 useDashboardState ？

import { useDashboardState } from '../components/Dashboard/DashboardStateProvider'

 const {
    data
  } = useDashboardState()

Answer 1

我没有测试过你的代码，但我认为这里有问题 const DashboardContext = React.createContext() 尝试在函数组件内部创建这个钩子

反应异步钩子怎么做

1 个答案: