React 中 Rendered fewer hooks than expected 错误

Z时代
2024-01-10
分类：综合

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

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

import {useEffect, useState} from'react';
exportdefaultfunctionApp() {
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>
<buttononClick={() => setCounter(counter + 1)}>Increment count</button>
</div>
  );
}

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

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

import {useEffect, useState} from'react';
exportdefaultfunctionApp() {
const [counter, setCounter] = useState(0);
// 将钩子移到可能返回的条件之上
const [message, setMessage] = useState('');
// 任何可能返回的条件都必须低于所有钩子
if (counter > 0) {
return<h1>Hello world</h1>;
  }
return (
<div>
<buttononClick={() => setCounter(counter + 1)}>Increment count</button>
</div>
  );
}

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

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

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

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

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

import {useEffect, useState} from'react';
exportdefaultfunctionApp() {
const [counter, setCounter] = useState(0);
if (counter > 0) {
// Error - useEffect is called conditionally
useEffect(() => {
console.log('hello world');
    }, []);
  }
return (
<div>
<buttononClick={() => setCounter(counter + 1)}>Increment count</button>
</div>
  );
}

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

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

import {useEffect, useState} from'react';
exportdefaultfunctionApp() {
const [counter, setCounter] = useState(0);
useEffect(() => {
if (counter > 0) {
console.log('hello world');
    }
  }, [counter]);
return (
<div>
<buttononClick={() => setCounter(counter + 1)}>Increment count</button>
</div>
  );
}