React hook 'useState' is called conditionally報(bào)錯(cuò)解決

更新時(shí)間：2022年12月02日 10:13:22 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React hook 'useState' is called conditionally報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們有條件地使用useState鉤子時(shí)，或者在一個(gè)可能有返回值的條件之后，會產(chǎn)生"React hook 'useState' is called conditionally"錯(cuò)誤。為了解決該錯(cuò)誤，將所有React鉤子移到任何可能油返回值的條件之上。

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

import React, {useState} from 'react';
export default function App() {
  const [count, setCount] = useState(0);
  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }
  // ?? React Hook "useState" is called conditionally.
  //React Hooks must be called in the exact same order
  // in every component render. Did you accidentally call
  // a React Hook after an early return?
  const [message, setMessage] = useState('');
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上述代碼片段的問題在于，我們使用的第二個(gè)useState鉤子，位于可能有返回值的條件之后。

頂層調(diào)用

為了解決該問題，我們必須在最頂層調(diào)用React鉤子。

import React, {useState} from 'react';
export default function App() {
  const [count, setCount] = useState(0);
  // ??? move hooks above condition that might return
  const [message, setMessage] = useState('');
  // ??? any conditions that might return must be below all hooks
  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

我們把第二個(gè)useState鉤子移到了可能返回值的條件之上。

這樣就解決了這個(gè)錯(cuò)誤，因?yàn)槲覀儽仨毚_保每次組件渲染時(shí)，React鉤子都以相同的順序被調(diào)用。

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

我們絕不應(yīng)該有條件地調(diào)用鉤子。

import React, {useState} from 'react';
export default function App() {
  const [count, setCount] = useState(0);
  if (count === 0) {
    // ?? React Hook "useState" is called conditionally.
    // React Hooks must be called in the exact same order in every component render.
    const [message, setMessage] = useState('');
  }
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上面的代碼片段導(dǎo)致了錯(cuò)誤，因?yàn)槲覀冇袟l件地調(diào)用第二個(gè)useState鉤子。

這是不允許的，因?yàn)殂^子的數(shù)量和鉤子調(diào)用的順序，在我們的函數(shù)組件的重新渲染中必須是相同的。

為了解決這個(gè)錯(cuò)誤，我們必須把useState的調(diào)用移到頂層，而不是有條件地調(diào)用這個(gè)鉤子。

就像文檔中所說的：

只在最頂層使用 Hook
不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook
確保總是在你的 React 函數(shù)的最頂層以及任何 return 之前使用 Hook
在 React 的函數(shù)組件中調(diào)用 Hook
在自定義 Hook 中調(diào)用其他 Hook

原文鏈接：bobbyhadz.com/blog/react-…

以上就是React hook 'useState' is called conditionally報(bào)錯(cuò)解決的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)useState conditionally的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: