如何解决React报错Rendered more hooks than during the previous render

发布时间：2024-03-30 14:30:23 来源：网络

总览当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时，会产生 "Rendered more hooks than during the previous

总览

当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时，会产生"Rendered more hooks than during the previous render"错误。为了解决该错误，将所有的钩子移到函数组件的顶层，以及不要在条件中使用钩子。

这里有个示例用来展示错误是如何发生的。

// App.js
import {useEffect, useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  // ⛔️ Error: Rendered more hooks than during the previous render.
  if (counter > 0) {
    // ️ calling React hook conditionally
    useEffect(() => {
      console.log('hello world');
    });
  }
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

代码的问题在于，我们有条件地调用了useEffect钩子。

顶层调用

为了解决该错误，我们必须将条件移到钩子内部。因为React钩子只能在顶层调用。

import {useEffect, useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  // ✅ hook is called at top level (not conditionally)
  useEffect(() => {
    if (counter > 0) {
      console.log('hello world');
    }
  });
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

我们将if语句移动到了useEffect钩子内部。

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

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

这里有另外一个示例用来展示错误是如何发生的。

import {useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  // ️ this returns before second hook runs if condition is met
  if (counter > 0) {
    return <h2>Returning early</h2>;
  }
  // ⛔️ Error because hook is called conditionally
  const [color, setColor] = useState('salmon');
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

问题在于，第二个useState钩子只有在上面的条件没有满足时才会被调用。

条件之上

为了解决这个错误，把所有的钩子移到组件的顶层，在任何可能返回值的条件之上。

import {useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  const [color, setColor] = useState('salmon');
  // ️ condition that may return early must be below all hooks
  if (counter > 0) {
    return <h2>Returning early</h2>;
  }
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

我们把第二个useState钩子移动到有可能返回一个值的if条件上面。

这是很有帮助的，因为钩子现在在顶层，并且有可预测的行为，允许React在调用useState和useEffect之间正确地保存状态。

就像文档中所说的那样：