解決React報錯Invalid hook call
總覽
導(dǎo)致"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ā)服務(wù)。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)用。
你應(yīng)該只使用具有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
是一個自定義鉤子,并允許我們在里面使用鉤子。
就像文檔中所說的那樣:
- 只從React函數(shù)組件或自定義鉤子中調(diào)用Hook
- 只在最頂層使用 Hook
- 不要在循環(huán),條件或嵌套函數(shù)中調(diào)用 Hook
- 確??偸窃谀愕?React 函數(shù)的最頂層以及任何 return 之前使用 Hook
翻譯原文鏈接:bobbyhadz.com/blog/react-…
以上就是解決React報錯Invalid hook call的詳細內(nèi)容,更多關(guān)于React報錯Invalid hook call的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用React-Window實現(xiàn)虛擬滾動效果的示例代碼
React-Window?是一個為?React?應(yīng)用程序中高效渲染大數(shù)據(jù)集而設(shè)計的庫,它基于窗口化或虛擬化的原則運行,本文將使用React-Window實現(xiàn)虛擬滾動效果,感興趣的可以了解下2024-01-01react性能優(yōu)化useMemo與useCallback使用對比詳解
這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08React實現(xiàn)動態(tài)調(diào)用的彈框組件
這篇文章主要為大家詳細介紹了React實現(xiàn)動態(tài)調(diào)用的彈框組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-08-08Hello?React的組件化方式之React入門小案例演示
這篇文章主要介紹了Hello?React的組件化方式-React入門小案例,本文通過Hello?React的案例,?來體驗一下React開發(fā)模式,?以及jsx的語法,需要的朋友可以參考下2022-10-10