reactjs - React Hooks 的提前返回问题

Question

我遇到了 Invariant violation: rendered less hooks than expected 使用 react Hook 的问题。从其他答案来看，很明显不应有条件地调用钩子(Hook)(Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks)。

导致应用崩溃的案例:

const MyComponent = (item) => {
    const [itemState, setState] = useState(true);

    if (!item) {
        return null;
    }

    const [anotherState, setAnotherState] = useState(true);

    return (<div>{item.name}</div>)
}

作为一次尝试，我尝试通过在调用 Hook 之前移动支票来修复它，例如:

const MyComponent = (item) => {

    if (!item) {
        return null;
    }

    const [itemState, setState] = useState(true);
    const [anotherState, setAnotherState] = useState(true);

    return (<div>{item.name}</div>)
}

这似乎有效，而且永远不会崩溃。我决定安装 eslint-plugin-react-hooks 以防止将来出现类似情况。现在它用 React Hook 发出警告“useState”被有条件地调用。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用。你是否在提前返回后不小心调用了 React Hook？

所以我的问题是:我是否应该始终在所有 Hook 运行后 执行返回？例如:

const MyComponent = (item) => {

    const [itemState, setState] = useState(true);
    const [anotherState, setAnotherState] = useState(true);

    if (!item) {
        return null;
    }

    return (<div>{item.name}</div>)
}

如果是，为什么当我在第一个和第二个钩子(Hook)之间返回 时它会崩溃，而如果我在所有钩子(Hook)之前 返回时它不会崩溃？

Answer 1

如果您在提前返回之前或之后移动所有 Hook ，那么您在每次渲染时始终拥有相同数量的 Hook (无或 2 个)。如果你在前面放一个，在后面放一个，那么你就没有，当它提前返回时，你有一个钩子(Hook)，如果没有，你有 2 个钩子(Hook)。

在早期返回之后放置 useState 会混淆 linter，但它也会破坏你的状态。当您提前返回时状态会重置，而在下一次渲染时则不会。

在下面的示例中，一个点被添加到“Hello World”，当您关闭并打开时，所有的点都消失了。在早期返回之前定义 setState 将使您保留这些点。

const { useState } = React;
function App({ wut }) {
  const [show, setShow] = useState(true);
  return (
    <div>
      <button onClick={() => setShow(s => !s)}>
        toggle
      </button>
      <MyComponent item={show} />
    </div>
  );
}
const MyComponent = ({ item }) => {
  if (!item) {
    return <div>no item</div>;
  }
  const [itemState, setItemState] = useState('Hello World');
  return (
    <div>
      {itemState}
      <button onClick={() => setItemState(s => s + '.')}>
        Add .
      </button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>