关于react.js:React报错之Rendered-more-hooks-than-during-the-previous-render

2次阅读

共计 2039 个字符，预计需要花费 6 分钟才能阅读完成。

注释从这开始~

当咱们有条件地调用一个钩子或在所有钩子运行之前提前返回时，会产生 ”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 条件下面。