呈现的钩子比预期的少.这可能是由于意外的提前返回语句引起的.基于状态的条件呈现组件

Question

我是React Hooks的新手，我面临这个错误:呈现的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.

我确信这是一个愚蠢的初学者错误，我试着在网上查找类似的错误和解决方案，但没有运气。如有任何帮助，不胜感激。

Answer 1

假设Page1、Page2、Page3为React组件，而不是:

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

试题:

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