React函数组件中useEffect打印无效且报Hook调用错误，求解决方案

问题根源 #

你直接通过testfc()调用函数组件，这违反了React的组件渲染规则。Hooks（如useState、useEffect）仅能在React主动渲染组件的流程中调用，直接执行函数属于普通函数调用，不会触发React的组件生命周期机制，因此会抛出Hook调用无效的错误，同时useEffect也无法执行。

修复方案 #

1. 遵循组件命名规范 #

React要求函数组件名称必须以大写字母开头，否则会被当作普通HTML元素处理，这是容易忽略的细节。

2. 正确渲染组件 #

必须通过React的官方方式渲染组件，比如在JSX中引用，或者使用ReactDOM.createRoot（React 18及以上版本）挂载到DOM节点。

修复后的完整代码 #

// 组件名改为大写开头
const TestFC = () => {
  console.log('tesing testing 123')

  const [currentRole, setCurrentRole] = React.useState('reviewer')
  React.useEffect(() => console.log(currentRole), [currentRole])

  return <></>
}

// 将组件挂载到页面的DOM节点上（需确保页面存在id为root的元素）
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<TestFC />)

生效原理 #

当React通过JSX渲染<TestFC />时，会识别这是一个自定义组件，在调用组件函数的同时建立Hook执行上下文，确保useState和useEffect能正常工作。useEffect会在组件挂载完成后触发，此时就能打印出currentRole的初始值reviewer。

内容的提问来源于stack exchange，提问作者Colorful Codes