解決React報錯Invalid hook call

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

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

總覽

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

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

版本匹配

在項目的根目錄下打開終端，更新react和react-dom包的版本，確保版本是相匹配的，并且沒有使用過時的版本。

# ??? 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

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

這個錯誤通常是由于在同一個項目中擁有多個版本的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

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

調(diào)用組件

這里有另一個示例，用來展示錯誤是如何發(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>
  );
}

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

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

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

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

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

// 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開頭，所以它不被React認為是一個組件。因為所有的組件名稱必須以大寫字母開頭。它同樣也不是自定義鉤子，因為其名稱沒有以use開頭，比如說useCounter。

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

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

現(xiàn)在React認為useCounter是一個自定義鉤子，并允許我們在里面使用鉤子。

就像文檔中所說的那樣：