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

React報錯之Object?is?possibly?null的問題及解決方法

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

類型守衛(wèi)

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

下面是一個錯誤如何發(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不能確保我們將一個元素或者一個值賦值給ref,所以它的current屬性可能為null

為了解決這個錯誤,在訪問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屬性不存儲null。當程序進入到if代碼塊中,TypeScript就會知道ref對象上的current屬性就不會存儲null。

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

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

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

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

如果ref上的current屬性存儲了null,我們也可以使用可選鏈?. 操作符進行短路運算。

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),可選鏈?.操作符會進行短路運算,而不會拋出錯誤。換句話說,如果ref上的current屬性存儲了null,操作符會短路運算從而返回undefined。而不會在undefined上嘗試調用focus方法,導致一個運行時錯誤。

非空斷言

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

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中,感嘆號標記被稱為非空斷言操作符。被用來從類型中移除nullundefined ,而不用進行任何顯式的類型檢查。

當我們使用非空斷言時,基本上我們就是在告訴TS,ref對象上的current屬性不會存儲null或者undefined。

請注意,這種方法不是類型安全的,因為TypeScript不執(zhí)行任何檢查以確保屬性不是空的。

總結

造成 "Object is possibly null"的錯誤是因為useRef()鉤子可以傳遞一個初始值作為參數,而我們傳遞null作為初始值。該鉤子返回一個可變的ref對象,其.current屬性被初始化為所傳遞的參數。

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

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

相關文章

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

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

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

    react vue背景掛載機器問題

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

    react map使用方法實例詳解

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

    React 全面解析excel文件

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

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

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

    React學習筆記之高階組件應用

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

    三分鐘搞懂react-hooks及實例代碼

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

    淺析JS中什么是自定義react數據驗證組件

    我們在做前端表單提交時,經常會遇到要對表單中的數據進行校驗的問題。這篇文章主要介紹了js中什么是自定義react數據驗證組件,需要的朋友可以參考下
    2018-10-10
  • 一看就懂的ReactJs基礎入門教程-精華版

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

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

    react如何修改循環(huán)數組對象的數據

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

最新評論