React Object is possibly null报错
chuckQu 人气:0类型守卫
使用类型守卫来解决React中useRef
钩子“Object is possibly null”的错误。比如说,if (inputRef.current) {}
。一旦null
被排除在ref
的类型之外,我们就能够访问ref
上的属性。
下面是一个错误如何发生的示例。
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类型上的属性之前,我们必须使用类型守卫来从其类型中排除null
。
import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef<HTMLInputElement>(null); useEffect(() => { //
加载全部内容
- 猜你喜欢
- 用户评论