解決React報(bào)錯(cuò)Invalid hook call

更新時(shí)間：2022年12月02日 09:31:48 作者：Borislav Hadzhiev

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

總覽

導(dǎo)致"Invalid hook call. Hooks can only be called inside the body of a function component"錯(cuò)誤的有多種原因：

react和react-dom的版本不匹配。
在一個(gè)項(xiàng)目中有多個(gè)react包版本。
試圖將一個(gè)組件作為一個(gè)函數(shù)來(lái)調(diào)用，例如，App()而不是<App />。
在類里面使用鉤子，或者在不是組件或自定義鉤子的函數(shù)中使用鉤子。

版本匹配

在項(xiàng)目的根目錄下打開(kāi)終端，更新react和react-dom包的版本，確保版本是相匹配的，并且沒(méi)有使用過(guò)時(shí)的版本。

# ??? with NPM
npm install react@latest react-dom@latest
# ??? ONLY If you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest
# ----------------------------------------------
# ??? with YARN
yarn add react@latest react-dom@latest
# ??? ONLY If you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

如果錯(cuò)誤仍存在，嘗試刪除node_modules以及package-lock.json（不是package.json）文件，重新運(yùn)行npm install 并重啟你的IDE。

這個(gè)錯(cuò)誤通常是由于在同一個(gè)項(xiàng)目中擁有多個(gè)版本的react造成的。

# ??? delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
# ??? clean npm cache
npm cache clean --force
npm install

如果錯(cuò)誤仍然存在，請(qǐng)確保重啟了IDE和開(kāi)發(fā)服務(wù)。VSCode經(jīng)常出現(xiàn)故障，需要重啟。

調(diào)用組件

這里有另一個(gè)示例，用來(lái)展示錯(cuò)誤是如何發(fā)生的。

// App.js
import {useState} from 'react';
// ??? Don't call components as functions ???
App();
export default function App() {
  /**
   * ?? Warning: Invalid hook call. Hooks can only be
   * called inside of the body of a function component.
   *  This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   */
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

問(wèn)題在于，我們將App組件作為函數(shù)進(jìn)行調(diào)用。

你應(yīng)該只使用具有JSX語(yǔ)法的組件。比如：<App country="Austria" age="30" />，而不是App({country: 'Austria', age: 30})。

確保你沒(méi)有在一個(gè)類組件，或一個(gè)既不是組件也不是自定義鉤子的函數(shù)里面調(diào)用鉤子。

如果你有一個(gè)類，請(qǐng)將其轉(zhuǎn)換為能夠使用鉤子的函數(shù)。

下面是一個(gè)例子，說(shuō)明在一個(gè)既不是組件也不是自定義鉤子的函數(shù)中是如何引起錯(cuò)誤的。

// App.js
import {useState, useEffect} from 'react';
// ??? not a component nor custom hook
// so it can't use hooks
function counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('hello world');
  }, []);
}

counter函數(shù)以小寫的c開(kāi)頭，所以它不被React認(rèn)為是一個(gè)組件。因?yàn)樗械慕M件名稱必須以大寫字母開(kāi)頭。它同樣也不是自定義鉤子，因?yàn)槠涿Q沒(méi)有以use開(kāi)頭，比如說(shuō)useCounter。

我們只能在函數(shù)組件或自定義鉤子里面使用鉤子，所以能夠使用鉤子的一個(gè)方法是將counter重命名為useCounter。

import {useState, useEffect} from 'react';
function useCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('hello world');
  }, []);
}

現(xiàn)在React認(rèn)為useCounter是一個(gè)自定義鉤子，并允許我們?cè)诶锩媸褂勉^子。

就像文檔中所說(shuō)的那樣：