迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

React userRef 错误 Object is possibly null 修复

作者:迹忆客 最近更新:2023/02/01 浏览次数:

使用类型保护来解决 React 中的 useRef 钩子的“Object is possibly null”错误,例如 if(inputRef.current){}。 一旦 null 从 ref 的类型中排除,我们就可以访问 ref 上与其类型相对应的属性。

react userRef Object is possibly null

下面是产生该错误发生示例代码。

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(() => {
    // 这里 ref 可以是 null
    if (inputRef.current != null) {
      // TypeScript 知道这里的 ref 不为 null
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" id="message" />
      <button>Click</button>
    </div>
  );
}

我们使用了一个简单的 if 语句作为类型保护,以确保 ref 上的当前属性不存储空值。

TypeScript 知道,一旦我们进入 if 块,ref 对象的当前属性就不会存储空值。

确保使用 useRef 钩子上的泛型来正确键入 ref 的当前属性

请注意,我们传递了一个泛型来将 ref 的值输入到 HTMLInputElement。

DOM 元素的类型统一命名为 HTML***Element。 一旦你开始输入 HTML..,你的 IDE 应该能够帮助你自动完成。

一些常用的类型有:HTMLInputElementHTMLButtonElementHTMLAnchorElementHTMLImageElementHTMLTextAreaElementHTMLDivElement 等。

如果你在 ref 中存储不同的值,请确保将特定类型传递给 useRef 钩子的泛型,例如·const ref = useRef<{name: string}>(null);

如果 ref 上的当前属性存储空值,我们也可以使用可选链接 (?.) 运算符来阻断运行。

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>
  );
}

如果 ref 为空(null 或 undefined),则可选链接 (?.) 运算符会阻断运行而不是引发错误。

换句话说,如果 ref 上的当前属性存储了一个 null 值,则操作符会短路返回 undefined,而不是尝试在 undefined 值上调用 focus() 方法并导致运行时错误。

在 React 中使用 refs 的“对象可能为空”错误的另一种解决方案是使用非空 (!) 断言运算符。

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 中称为非空断言运算符。 它用于在不进行任何显式类型检查的情况下从类型中删除 null 和 undefined。

当我们使用它时,我们基本上告诉 TypeScript ref 对象上的当前属性不存储 null 或 undefined 的值。

请注意,这种方法不是类型安全的,因为 TypeScript 不执行任何检查以确保属性不为空。

导致“Object is possible null”错误的是因为 useRef() 钩子可以传递一个初始值作为参数,而我们将它传递给 null 作为初始值。

钩子返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数。

当我们将 ref prop 传递给元素时,例如 <input ref={myRef} />,React 将 ref 对象的 .current 属性设置为对应的 DOM 节点,但 TypeScript 无法确定我们是要设置 ref 为 DOM 元素还是稍后在我们的代码中设置它的值 。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间:2023/03/15 浏览次数:203 分类:React

在 React 中删除事件监听器: 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时,使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

React 中在 map() 中使用条件跳出map

发布时间:2023/03/15 浏览次数:198 分类:React

React 中在 map() 中使用条件: 在数组上调用 map() 方法。 使用 if 条件,如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =

在 React 中调用多个 onClick 函数

发布时间:2023/03/15 浏览次数:160 分类:React

在 React 中调用多个 onClick 函数: 在元素上设置 onClick 属性。 在事件处理函数中调用其他函数。 事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s

在 React 中按类名查找所有元素

发布时间:2023/03/15 浏览次数:171 分类:React

在 React 中通过 className 查找所有元素: 使用 getElementsByClassName 方法获取具有特定类的所有元素。 将对该方法的调用放在 useEffect() 钩子中。 import {useEffect} from react ; const App = () = { useEf

在 React 中检查元素是否获取到焦点

发布时间:2023/03/15 浏览次数:154 分类:React

要检查元素是否在 React 中获得焦点: 在元素上设置 ref 属性。 元素呈现后,检查元素是否是文档中的活动元素。 如果是,则该元素被聚焦。 import {useEffect, useRef} from react ; export defaul

在 React 中悬停时显示元素或文本

发布时间:2023/03/13 浏览次数:160 分类:React

在 React 中悬停时显示元素或文本: 在元素上设置 onMouseOver 和 onMouseOut 属性。 跟踪用户是否将鼠标悬停在状态变量中的元素上。 根据状态变量有条件地渲染另一个元素。 import {useStat

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便