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

React報(bào)錯(cuò)之Object?is?possibly?null的問題及解決方法

 更新時(shí)間:2022年07月30日 10:30:02   作者:chuckQu  
這篇文章主要介紹了React報(bào)錯(cuò)之Object?is?possibly?null的問題,造成 "Object is possibly null"的錯(cuò)誤是因?yàn)閡seRef()鉤子可以傳遞一個(gè)初始值作為參數(shù),而我們傳遞null作為初始值,本文給大家分享詳細(xì)解決方法,需要的朋友可以參考下

類型守衛(wèi)

使用類型守衛(wèi)來解決React中useRef鉤子“Object is possibly null”的錯(cuò)誤。比如說,if (inputRef.current) {} 。一旦null被排除在ref的類型之外,我們就能夠訪問ref上的屬性。

下面是一個(gè)錯(cuò)誤如何發(fā)生的示例。

import {useEffect, useRef} from 'react';

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // ?? Object is possibly 'null'.ts(2531)
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" id="message" />
      <button>Click</button>
    </div>
  );
}

代碼片段中的問題是,TypeScript不能確保我們將一個(gè)元素或者一個(gè)值賦值給ref,所以它的current屬性可能為null

為了解決這個(gè)錯(cuò)誤,在訪問ref類型上的屬性之前,我們必須使用類型守衛(wèi)來從其類型中排除null。

import {useEffect, useRef} from 'react';

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // ??? ref could be null here
    if (inputRef.current != null) {
      // ??? TypeScript knows that ref is not null here
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" id="message" />
      <button>Click</button>
    </div>
  );
}

我們使用簡單的if語句作為類型守衛(wèi),來確保ref上的current屬性不存儲(chǔ)null。當(dāng)程序進(jìn)入到if代碼塊中,TypeScript就會(huì)知道ref對(duì)象上的current屬性就不會(huì)存儲(chǔ)null。

確保在useRef鉤子上使用泛型,正確的類型聲明ref上的current屬性。

注意,我們傳遞了一個(gè)泛型來將ref的值類型聲明為HTMLInputElement。

一些常用的類型有:HTMLInputElement,HTMLButtonElement,HTMLAnchorElement,HTMLImageElement,HTMLTextAreaElement,HTMLSelectElement 等等。

如果你在ref中存儲(chǔ)了不同的值,請(qǐng)確保將特定類型傳遞給useRef鉤子的泛型,例如const ref = useRef<{name: string}>(null); 。

如果ref上的current屬性存儲(chǔ)了null,我們也可以使用可選鏈?. 操作符進(jìn)行短路運(yùn)算。

import {useEffect, useRef} from 'react';

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // ??? optional chaining (?.)
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" id="message" />
      {/* Cannot find name 'button'.ts(2304) */}
      <button>Click</button>
    </div>
  );
}

如果引用是空值(null或者undefined),可選鏈?.操作符會(huì)進(jìn)行短路運(yùn)算,而不會(huì)拋出錯(cuò)誤。換句話說,如果ref上的current屬性存儲(chǔ)了null,操作符會(huì)短路運(yùn)算從而返回undefined。而不會(huì)在undefined上嘗試調(diào)用focus方法,導(dǎo)致一個(gè)運(yùn)行時(shí)錯(cuò)誤。

非空斷言

另一種解決方案是使用非空斷言!操作符。

import {useEffect, useRef} from 'react';

export default function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // ??? using non-null (!) assertion
    inputRef.current!.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" id="message" />
      {/* Cannot find name 'button'.ts(2304) */}
      <button>Click</button>
    </div>
  );
}

在TypeScript中,感嘆號(hào)標(biāo)記被稱為非空斷言操作符。被用來從類型中移除nullundefined ,而不用進(jìn)行任何顯式的類型檢查。

當(dāng)我們使用非空斷言時(shí),基本上我們就是在告訴TS,ref對(duì)象上的current屬性不會(huì)存儲(chǔ)null或者undefined。

請(qǐng)注意,這種方法不是類型安全的,因?yàn)門ypeScript不執(zhí)行任何檢查以確保屬性不是空的。

總結(jié)

造成 "Object is possibly null"的錯(cuò)誤是因?yàn)?code>useRef()鉤子可以傳遞一個(gè)初始值作為參數(shù),而我們傳遞null作為初始值。該鉤子返回一個(gè)可變的ref對(duì)象,其.current屬性被初始化為所傳遞的參數(shù)。

當(dāng)傳遞ref prop給一個(gè)元素時(shí),比如<input ref={myRef} /> ,React將ref對(duì)象的.current屬性設(shè)置為相應(yīng)的DOM節(jié)點(diǎn),但TypeScript無法確定我們是否會(huì)將ref設(shè)置為DOM元素,或在我們的代碼中稍后設(shè)置其值。

到此這篇關(guān)于React報(bào)錯(cuò)之Object is possibly null的文章就介紹到這了,更多相關(guān)React  Object is possibly null報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序功能

    react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序功能

    這篇文章主要介紹了react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序,本文結(jié)合實(shí)例代碼講解react-dnd是如何實(shí)現(xiàn),代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-02-02
  • react vue背景掛載機(jī)器問題

    react vue背景掛載機(jī)器問題

    這篇文章主要介紹了react vue背景掛載機(jī)器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • react map使用方法實(shí)例詳解

    react map使用方法實(shí)例詳解

    map()方法是在React中常用的數(shù)組處理方法之一,可以用于遍歷數(shù)組、生成組件列表以及進(jìn)行數(shù)據(jù)轉(zhuǎn)換等操作,通過合理運(yùn)用map()方法,可以更靈活地處理和展示數(shù)據(jù),下面給大家講解react map使用方法,感興趣的朋友一起看看吧
    2023-10-10
  • React 全面解析excel文件

    React 全面解析excel文件

    這篇文章主要介紹了React 全面解析excel文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React?hook實(shí)現(xiàn)簡單的websocket封裝方式

    React?hook實(shí)現(xiàn)簡單的websocket封裝方式

    這篇文章主要介紹了React?hook實(shí)現(xiàn)簡單的websocket封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React學(xué)習(xí)筆記之高階組件應(yīng)用

    React學(xué)習(xí)筆記之高階組件應(yīng)用

    這篇文章主要介紹了React 高階組件應(yīng)用,詳細(xì)的介紹了什么是React高階組件和具體使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • 三分鐘搞懂react-hooks及實(shí)例代碼

    三分鐘搞懂react-hooks及實(shí)例代碼

    React?Hooks是今年最勁爆的新特性真的毫不夸張。如果你也對(duì)react感興趣,或者正在使用react進(jìn)行項(xiàng)目開發(fā),請(qǐng)抽出點(diǎn)時(shí)間閱讀下此文
    2022-03-03
  • 淺析JS中什么是自定義react數(shù)據(jù)驗(yàn)證組件

    淺析JS中什么是自定義react數(shù)據(jù)驗(yàn)證組件

    我們?cè)谧銮岸吮韱翁峤粫r(shí),經(jīng)常會(huì)遇到要對(duì)表單中的數(shù)據(jù)進(jìn)行校驗(yàn)的問題。這篇文章主要介紹了js中什么是自定義react數(shù)據(jù)驗(yàn)證組件,需要的朋友可以參考下
    2018-10-10
  • 一看就懂的ReactJs基礎(chǔ)入門教程-精華版

    一看就懂的ReactJs基礎(chǔ)入門教程-精華版

    現(xiàn)在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS,ReactJs的虛擬DOM(Virtual DOM)和組件化的開發(fā)深深的吸引了我,下面來跟我一起領(lǐng)略ReactJs的風(fēng)采吧~~ 文章有點(diǎn)長,耐心讀完,你會(huì)有很大收獲哦
    2021-04-04
  • react如何修改循環(huán)數(shù)組對(duì)象的數(shù)據(jù)

    react如何修改循環(huán)數(shù)組對(duì)象的數(shù)據(jù)

    這篇文章主要介紹了react如何修改循環(huán)數(shù)組對(duì)象的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12

最新評(píng)論