React中如何处理Object is possibly null错误并有效解决？

本文共计317个文字，预计阅读时间需要2分钟。

目录类型守卫非空断言总结类型守卫使用类型守卫来避免React中useRef和对象可能为null的错误。例如，if (inputRef.current) {}。一旦null被排除在ref的类型之外，我们就能访问它。非空断言总结

目录

• 类型守卫
• 非空断言
• 总结

类型守卫

使用类型守卫来解决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(() => { //