前端 - 如何判断一个function是否是函数式组件？

Question

如何判断一个function是否是函数式组件？

我们有如下的函数式组件代码：

import React, { useEffect, useState } from 'react'import { Card } from 'antd';const CPU = () => {  const [aaa, setAaa] = useState('123')  // 这行会报错  console.log(aaa)  return (    <div style={{padding: '16px'}}>      <Card title="Card title">        <p>Card content</p>      </Card>    </div>  )}export default CPU

但是当我运行的时候报错:

Invalid hook call. Hooks can only be called inside of the body of a function component. 

这里说Hooks can only be called inside of the body of a function component. 但是我这个就是一个函数式组件呀，请问如何进行判断是否是函数式组件呢？

注：
我的文件路径在：

src/renderer/pages/localtools/machine/cpu.tsx

代码就是如上。没有看到有写错的地方呢，如何能判断我写的这个是函数式组件呢？

Answer 1

你的函数确实是函数式组件，但是可能你在其他地方误用了React的hooks。根据你提供的错误信息，“Hooks can only be called inside of the body of a function component.”，这个错误一般发生在使用React Hooks的地方，但并非在函数式组件内部，而是在类组件的实例方法或者普通的JS函数中。

React Hooks必须在React的函数组件内部使用，不能在常规的JavaScript函数中使用。

你可能在其他地方错误地使用了useState，例如在类组件中或者在非React函数中。请检查你的其他代码，确保所有的React Hooks都在函数组件内部被调用。

另外，你的CPU函数组件本身并没有问题，它是一个有效的函数式组件。我建议你检查组件定义之外的代码，可能问题出在那里。

希望这个答案对你有所帮助！如果你还有任何问题，欢迎继续提问。