useState报错，Error: Rendered more hooks than during the previous render?

Question

import React, {useState} from 'react';

export default function GeekResume() {

  //let canvas; 
  const [expectJob, setExpectJob] = useState("前端开发工程师");



  return (
    <div>
      <div class="flex-auto w-14 h-14 ">
        03
      </div>
      <button><a>下载pdf</a></button>
    </div>)
}

错误在 const [expectJob, setExpectJob] = useState("前端开发工程师");

错误是：报错：Error: Rendered more hooks than during the previous render.

去掉这一行就能运行。我看了react官方文档查了stackoverflow，发现我的情况跟他们都不一样，我这个GeekResume()里面并没有定义hooks。不知道为什么。

Answer 1

果然如 乔治 说的，我上面的代码是一个子组件，而它的父组件里面引用子组件时用了条件判断。

Answer 2

参考React hook规则：

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)

参考