迹忆客 专注技术分享

当我们有条件地使用 useState 钩子或在可能返回值的条件之后，会出现错误“React hook 'useState' is called conditionally”。 要解决该错误，需要将所有 React 钩子移到任何可能返回值的条件之上。

下面是错误发生方式的示例。

import React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }

  // React Hook "useState" is called conditionally.
  //React Hooks must be called in the exact same order
  // in every component render. Did you accidentally call
  // a React Hook after an early return?
  const [message, setMessage] = useState('');

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

代码片段中的问题是 - 我们在可能返回值的条件之后使用第二个 useState 钩子。

为了解决这个错误，我们只能在顶层调用 React 钩子。

import React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // 将钩子移到可能返回的条件之上
  const [message, setMessage] = useState('');

  // 任何可能返回的条件都必须低于所有钩子
  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

我们将第二个 useState 钩子移到可能返回值的条件之上。

这解决了错误，因为我们必须确保每次渲染组件时都以相同的顺序调用 React 钩子。

这意味着我们不允许在循环、条件或嵌套函数中使用钩子。

我们永远不应该有条件地调用钩子。

import React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  if (count === 0) {
    // React Hook "useState" is called conditionally.
    // React Hooks must be called in the exact same order in every component render.
    const [message, setMessage] = useState('');
  }


  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上面的代码片段会导致错误，因为我们有条件地调用了第二个 useState 钩子。

这是不允许的，因为在重新渲染我们的函数组件时，钩子的数量和钩子调用的顺序必须相同。

为了解决这个错误，我们必须将 useState 调用移到顶层而不是有条件地调用钩子。

如文档所述：

• 只在顶层调用钩子
• 不要在循环、条件或嵌套函数中调用钩子
• 在任何提前返回之前，始终在 React 函数的顶层使用钩子
• 仅从 React 函数组件或自定义钩子调用钩子。

这有助于 React 保留多个 useState 调用之间的钩子状态。