React Hook "useState" 在函数 "test" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数

Question

我正在尝试在我的功能组件中使用 React useState 挂钩，但出现此错误：

Failed to compile
./src/Person/Person.js
  Line 5:43:  React Hook "useState" is called in function "person" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

这是相同的代码：

import React, {useState} from 'react';
import { tsPropertySignature, directive } from '@babel/types';

const person =props =>{
    const [initState,stateChangeFunction]=useState({name:'akie@123'})
return <p>I am from the {}</p>   
}
 export default person;

提前致谢。

Answer 1

在您的情况下，react 将大写的函数名称识别为反应函数组件

function Person () {}

如需了解更多信息，请将函数名称识别为以“使用”开头的自定义钩子，例如

function usePeople() {}

并且钩子仅在函数组件或自定义钩子中可用

Answer 2

您的组件名称应大写，应如下所示：-

const Person = () => {
 // .......
 }

 export default Person;