React 中 Rendered fewer hooks than expected 错误

当我们在可能返回值的条件之后使用钩子时，会出现错误“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”意味着我们在组件的第一次渲染时渲染了比重新渲染时更多的钩子。 这是由于在使用钩子之前有条件地返回造成的。

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