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

Posted 2023-03-16

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

【英文标题】：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 的父组件有关。

我已经将我的组件转换为我熟悉的类组件。现在一切正常。

【参考方案1】：

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

  page === "Page1" && Page1()


  page === "Page2" && Page2()


  page === "Page3" && Page3()

试试：

  page === "Page1" && <Page1 />


  page === "Page2" && <Page2 />


  page === "Page3" && <Page3 />

【讨论】：

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