React 中的 Hook 调用无效

Question

我很新反应并得到以下错误：

react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我想在提交表单时使用另一个组件。因此，在提交表单时，在文件 A 中，它使用了一个函数，在该函数中，它首先检查某些内容，然后再调用其他组件，例如：

ComponentName()

在组件上我有一些 useState 钩子：

function ComponentName() {
    const [state1, setState1] = useState('')
    const [state2, setState2] = useState('')
    const [state3, setState3] = useState('')

在页面加载的那一刻，我收到了这个错误，有谁知道怎么回事？

Answer 1

你不调用组件函数，你将它们交给 React 并让 React 酌情调用它们。所以你永远不会在你的代码中写ComponentName()。相反，您将使用 <ComponentName /> 作为渲染另一个组件的一部分，或者对于 React 树的最顶层，作为您传递 ReactDOM.render 的 JSX 的一部分。 （或者当然，使用 React.createElement 而不是 JSX。）

您收到错误是因为如果您 调用 所示的组件函数，它不会被用作组件，因此您对钩子的调用没有组件实例可以在后面使用场景——因此是错误消息。