挂钩调用无效。钩子只能在函数组件的主体内部调用。即使在使用钩子指南之后

Question

我正在尝试在功能组件内部使用挂钩。只是定义钩子本身我收到了一个错误。

import React, { useRef } from "react";

function CreateTemplate() {
  const editorRef = useRef();
  return (<div>something</div>)
}

点击上一个组件时会调用此文件，其中使用了历史记录。将其添加到

<button
    onClick={() => {
        history.push({
          pathname: "/create-template",
        });
      }}
    >
      CONFIRM TEMPLATE
</button>

Route定义如下。

  <Switch>
    <AuthRoute path='/dashboard' render={Dashboard} type='private' />
    <AuthRoute path='/templates' render={Templates} type='private' />
    <AuthRoute
      path='/create-template'
      render={CreateTemplate}
      type='private'
    />
    <Route path='/' render={Dashboard} />
  </Switch>

下面是react和react-dom版本

"react": "^17.0.2",
"react-dom": "^17.0.2"

我不确定为什么 useRef 钩子或任何钩子抛出上述错误。尝试了几乎所有可能的解决方案。

Answer 1

您可能没有在路线中正确呈现 CreateTemplate，render 道具通常采用函数值。根据您的 AuthRoute 实施，我相信您可以执行以下操作之一：

使用 component 道具：

<AuthRoute
  path='/create-template'
  component={CreateTemplate}
  type='private'
/>

保留 render 属性并渲染一个匿名组件：

<AuthRoute
  path='/create-template'
  render={routeProps => <CreateTemplate {...routeProps} />}
  type='private'
/>

如果这两种情况都不是，那么我们肯定需要查看您的 AuthRoute 组件实现以查看其呈现方式。

挂钩调用无效。钩子只能在函数组件的主体内部调用。即使在使用钩子指南之后

Invalid hook call. Hooks can only be called inside of the body of a function component. Even after using hooks guidlines

reactjs

react-dom

react-hooks