在函数“ test”中调用React Hook“ useState”，该函数既不是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

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

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

 export default Person;

Answer 2

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

function Person () {}

更多内容，请像“

function usePeople() {}

和挂钩只能在功能组件或自定义挂钩中使用