快捷導(dǎo)航

解決React報錯Rendered more hooks than during the previous render

更新時間：2022年12月02日 09:07:10 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報錯Rendered more hooks than during the previous render解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們有條件地調(diào)用一個鉤子或在所有鉤子運(yùn)行之前提前返回時，會產(chǎn)生"Rendered more hooks than during the previous render"錯誤。為了解決該錯誤，將所有的鉤子移到函數(shù)組件的頂層，以及不要在條件中使用鉤子。

這里有個示例用來展示錯誤是如何發(fā)生的。

// 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>
  );
}

代碼的問題在于，我們有條件地調(diào)用了useEffect鉤子。

頂層調(diào)用

為了解決該錯誤，我們必須將條件移到鉤子內(nèi)部。因為React鉤子只能在頂層調(diào)用。

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鉤子內(nèi)部。

這就解決了錯誤，因為我們必須確保每次組件渲染時，React鉤子都以相同的順序被調(diào)用。

這意味著我們不允許在循環(huán)、條件或嵌套函數(shù)中使用鉤子。

這里有另外一個示例用來展示錯誤是如何發(fā)生的。

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鉤子只有在上面的條件沒有滿足時才會被調(diào)用。

條件之上

為了解決這個錯誤，把所有的鉤子移到組件的頂層，在任何可能返回值的條件之上。

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條件上面。

這是很有幫助的，因為鉤子現(xiàn)在在頂層，并且有可預(yù)測的行為，允許React在調(diào)用useState和useEffect之間正確地保存狀態(tài)。

就像文檔中所說的那樣：