您可以使用React钩子早日返回吗？

您可以使用React钩子早日返回吗？

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