Question

我正在使用打字稿，只是在React.FC内使用了一个钩子，但是我收到错误消息，说我只能在功能组件内使用钩子。 React.FC不算作功能成分吗？

这是我在做什么

interface Props { }

export const Register: React.FC<Props> = () => {
  const [test, setTest] = useState('')

  return (
    <div>
      Register View
    </div>
  )
}

错误

× 错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。这个可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本

这毫无意义，这怎么可能？如果我删除行const [test, setTest] = useState('')，一切正常。

Answer 1

您只能在使用jsx渲染的功能组件中使用钩子，我想您尝试使用{Register(props)}渲染功能组件，但应该使用<Register {...props}>渲染它。

Answer 2

HMR是正确的，我发现问题出在我如何创建路由上。

我正在使用render，它的作用类似于Register(props)

<Route exact path='/register' render={Register} />

但是我应该使用component来创建<Register {...props}>

<Route exact path='/register' component={Register} />

React.FC内部无效的钩子调用

2 个答案: