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 组件实现以了解其呈现方式。

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

1 个答案: