渲染的钩子比预期的要少。这可能是由于意外提前退货声明造成的。基于状态的条件渲染组件答案

【问题标题】：Rendered fewer hooks than expected. This may be caused by an accidental early return statement. Conditional rendering component based on state [duplicate]渲染的钩子比预期的要少。这可能是由于意外提前退货声明造成的。基于状态的条件渲染组件
【发布时间】：2021-12-14 20:30:07
【问题描述】：

我是 React Hooks 的新手，我遇到了这个错误：渲染的钩子比预期的少。这可能是由于意外提前退货声明造成的。当我尝试在我的函数组件中进行条件渲染时。

这是我的组件：

export const MyComponent= () => {
  const [page, SetPage] = useState("");

  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>
  );
};

当我单击“显示第 1 页”时，我希望它显示 Page1() 功能组件。但是我得到了这个错误：Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

我确定这是一个愚蠢的初学者错误，我试图在网上查看类似的错误和解决方案，但没有运气。任何帮助表示赞赏。

【问题讨论】：

@GiorgiMoniava 我相信这建议将其呈现为而不是 Page1()。我原来有它像但我得到了同样的错误。
@Carrie 我正在尝试复制错误，但我什么也没得到。您是否还有其他可能是罪魁祸首的代码？
@GiorgiMoniava 其实我也在发现同样的事情。我把它放在不同的位置，它工作正常。我现在怀疑它与呈现 MyComponent 的父组件有关。
我已经将我的组件转换为我熟悉的类组件。现在一切正常。

标签： reactjs react-hooks react-functional-component

【解决方案1】：

假设 Page1、Page2 和 Page3 是 React 组件，而不是：

{
  page === "Page1" && Page1()
}
{
  page === "Page2" && Page2()
}
{
  page === "Page3" && Page3()
}

试试：

{
  page === "Page1" && <Page1 />
}
{
  page === "Page2" && <Page2 />
}
{
  page === "Page3" && <Page3 />
}

【讨论】：

我一开始也是这样，但得到了同样的错误。