React报错之Object is possibly null

原文链接：https://bobbyhadz.com/blog/react-useref-object-is-possibly-null[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

类型守卫

使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误。比如说，if (inputRef.current) {} 。一旦null被排除在ref的类型之外，我们就能够访问ref上的属性。

useref-object-is-possibly-null.webp

下面是一个错误如何发生的示例。

代码语言：javascript复制

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。

代码语言：javascript复制

import {useEffect, useRef} from 'react';

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

  useEffect(() => {
    // 


	

html typescript https 网络安全 存储 


	




	
 0 人点赞