React Hooks新手求助：条件渲染函数组件时出现Rendered fewer hooks than expected报错

嘿，我刚踩过这个一模一样的坑！你的问题其实是React Hooks最核心的规则之一——hooks必须在组件的顶层按固定顺序调用，绝对不能在条件判断、循环或者嵌套逻辑里调用（包括像你这样条件性地直接调用其他组件函数）。

我来给你拆解下问题出在哪：你现在是直接写Page1()、Page2()这种组件函数调用，比如{ page === "Page1" && Page1() }。这种写法会让React把Page1内部的hooks（哪怕你现在没写，以后加了也会出问题）当成MyComponent自己的hooks来处理。当page从空切换到"Page1"时，MyComponent的hooks数量突然变多了；要是之后切回空状态，hooks数量又骤减，完全违反了React对hooks调用顺序和数量的严格要求，所以才会抛出那个报错。

正确的写法：用JSX元素渲染组件 #

你只需要把直接调用组件函数的方式改成JSX标签形式，也就是<Page1 />而不是Page1()。React会把每个JSX组件当成独立的实例处理，它们内部的hooks会被单独追踪，不会干扰父组件的hooks调用逻辑。

修改后的代码如下：

export const MyComponent= () => { 
  const [page, setPage] = useState(""); // 小提示：React里状态更新函数一般用小驼峰命名，比如setPage而非SetPage，这是社区通用规范~
  return ( 
    <div> 
      { page === "" && (
        <> 
          <div onClick={() => setPage("Page1")}>Show Page 1</div> 
          <div onClick={() => setPage("Page2")}>Show Page 2</div> 
          <div onClick={() => setPage("Page3")}>Show Page 3</div> 
        </> 
      )} 
      { page === "Page1" && <Page1 /> } 
      { page === "Page2" && <Page2 /> } 
      { page === "Page3" && <Page3 /> } 
    </div> 
  ); 
};

只要改成JSX标签的形式，那个hooks数量不一致的报错立刻就会消失啦！

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