欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決React報錯Invalid hook call

 更新時間:2022年12月02日 09:31:48   作者:Borislav Hadzhiev  
這篇文章主要為大家介紹了React報錯Invalid hook call解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

總覽

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

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

版本匹配

在項目的根目錄下打開終端,更新reactreact-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實現(xiàn)虛擬滾動效果的示例代碼

    React-Window?是一個為?React?應(yīng)用程序中高效渲染大數(shù)據(jù)集而設(shè)計的庫,它基于窗口化或虛擬化的原則運行,本文將使用React-Window實現(xiàn)虛擬滾動效果,感興趣的可以了解下
    2024-01-01
  • React中jquery引用的實現(xiàn)方法

    React中jquery引用的實現(xiàn)方法

    這篇文章主要介紹了React中jquery引用的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • react性能優(yōu)化useMemo與useCallback使用對比詳解

    react性能優(yōu)化useMemo與useCallback使用對比詳解

    這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • React實現(xiàn)動態(tài)調(diào)用的彈框組件

    React實現(xiàn)動態(tài)調(diào)用的彈框組件

    這篇文章主要為大家詳細介紹了React實現(xiàn)動態(tài)調(diào)用的彈框組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • React實現(xiàn)雙向綁定示例代碼

    React實現(xiàn)雙向綁定示例代碼

    這篇文章給大家介紹了在React中如何實現(xiàn)雙向綁定,文中給出了示例代碼,對大家的理解與學習很有幫助,有需要的朋友下面來一起看看吧。
    2016-09-09
  • 深入探討前端框架react

    深入探討前端框架react

    本文帶領(lǐng)大家一起探討前端框架react,涉及到前端框架react相關(guān)知識,對前端框架react相關(guān)知識感興趣的朋友一起學習吧
    2015-12-12
  • 詳解React項目如何修改打包地址(編譯輸出文件地址)

    詳解React項目如何修改打包地址(編譯輸出文件地址)

    這篇文章主要介紹了詳解React項目如何修改打包地址(編譯輸出文件地址),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • 列表頁常見hook封裝實例

    列表頁常見hook封裝實例

    這篇文章主要為大家介紹了列表頁常見的hook封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • Hello?React的組件化方式之React入門小案例演示

    Hello?React的組件化方式之React入門小案例演示

    這篇文章主要介紹了Hello?React的組件化方式-React入門小案例,本文通過Hello?React的案例,?來體驗一下React開發(fā)模式,?以及jsx的語法,需要的朋友可以參考下
    2022-10-10
  • 在react配置使用less的完美方案

    在react配置使用less的完美方案

    由于 create-react-app 使用 webpack 作為其模塊打包器,你需要修改 webpack 的配置來支持 .less 文件,這篇文章主要介紹了在react配置使用less的完美方案,需要的朋友可以參考下
    2024-04-04

最新評論