迹忆客 专注技术分享

当我们在可能返回值的条件之后使用钩子时，会出现错误“Rendered fewer hooks than expected. This may be caused by an accidental early return statement”。 要解决该错误，需要将所有 React 钩子移到任何可能返回值的条件之上。

首先我们看一下产生该错误的一个示例

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  // 可能在下面的钩子运行之前返回一个值
  if (counter > 0) {
    return <h1>Hello world</h1>;
  }

  // Rendered fewer hooks than expected.
  // This may be caused by an accidental early return statement
  const [message, setMessage] = useState('');

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

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

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

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

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

  // 任何可能返回的条件都必须低于所有钩子
  if (counter > 0) {
    return <h1>Hello world</h1>;
  }

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

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

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

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

我们必须确保组件中的所有 React 钩子在每次渲染时都以相同的顺序调用。

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

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  if (counter > 0) {
    // Error - useEffect is called conditionally
    useEffect(() => {
      console.log('hello world');
    }, []);
  }

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

示例中的代码片段会导致错误，因为有条件地调用了 useEffect 钩子。

为了解决这个问题，我们可以将 if 语句移动到 useEffect 钩子中。

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    if (counter > 0) {
      console.log('hello world');
    }
  }, [counter]);

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment count</button>
    </div>
  );
}

将 if 语句移到钩子内部会有所帮助，因为钩子现在处于顶层并且具有可预测的行为，允许 React 正确保留 useState 和 useEffect 调用之间的状态。

如文档所述：

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

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

错误“Rendered fewer hooks than expected. This may be caused by an accidental early return statement”意味着我们在组件的第一次渲染时渲染了比重新渲染时更多的钩子。 这是由于在使用钩子之前有条件地返回造成的。

要解决错误，需要确保将钩子移动到组件的顶层，并将任何可能过早返回的条件放在底部。