React不允许您在其他钩子之前先返回。如果一个组件执行的钩子少于以前的渲染，则将出现以下错误：
不变违规：渲染的钩子少于预期。这可能是由意外的提前归还声明引起的。
React无法分辨早期返回和条件挂钩调用之间的区别。例如，如果您有3个呼叫，
useState而您有时在第二个
useState呼叫之后返回，则React无法告知您是在第二个呼叫之后返回还是在第一个或第二个
useState呼叫周围设置了条件，因此它无法可靠地知道它是否是两个返回正确的状态
useState的呼叫
没有 发生。
这是一个示例，您可以用来查看此错误的实际发生（两次单击“增量状态1”按钮以获取错误）：
import React from "react";import ReactDOM from "react-dom";function App() { const [state1, setState1] = React.useState(1); if (state1 === 3) { return <div>State 1 is 3</div>; } const [state2, setState2] = React.useState(2); return ( <div className="App"> <div>State 1: {state1}</div> <div>State 2: {state2}</div> <button onClick={() => setState1(state1 + 1)}>Increment State 1</button> <button onClick={() => setState2(state2 + 1)}>Increment State 2</button> </div> );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);我建议的另一种方法是将早期返回的部分分成自己的部分。提早返回后该部分所需的任何内容都将作为道具传递给新组件。
以我的示例为例，它可能如下所示：
import React from "react";import ReactDOM from "react-dom";const AfterEarlyReturn = ({ state1, setState1 }) => { const [state2, setState2] = React.useState(2); return ( <div className="App"> <div>State 1: {state1}</div> <div>State 2: {state2}</div> <button onClick={() => setState1(state1 + 1)}>Increment State 1</button> <button onClick={() => setState2(state2 + 1)}>Increment State 2</button> </div> );};function App() { const [state1, setState1] = React.useState(1); if (state1 === 3) { return <div>State 1 is 3</div>; } return <AfterEarlyReturn state1={state1} setState1={setState1} />;}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);
