React報(bào)錯(cuò)之Object?is?possibly?null的問題及解決方法
類型守衛(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)記被稱為非空斷言操作符。被用來從類型中移除null
和undefined
,而不用進(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)文章希望大家以后多多支持腳本之家!
- React Native:react-native-code-push報(bào)錯(cuò)的解決
- React報(bào)錯(cuò)之Parameter event implicitly has an any type解決
- react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法
- react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問題及解決
- React報(bào)錯(cuò)解決之ref返回undefined或null
- 解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget
相關(guā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-02React?hook實(shí)現(xiàn)簡單的websocket封裝方式
這篇文章主要介紹了React?hook實(shí)現(xiàn)簡單的websocket封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09React學(xué)習(xí)筆記之高階組件應(yīng)用
這篇文章主要介紹了React 高階組件應(yīng)用,詳細(xì)的介紹了什么是React高階組件和具體使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06淺析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-10react如何修改循環(huán)數(shù)組對(duì)象的數(shù)據(jù)
這篇文章主要介紹了react如何修改循環(huán)數(shù)組對(duì)象的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12