有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

React userRef 错误 Object is possibly null 修复

前端框架 炮渣日记 4周前 (11-10) 31次浏览 已收录 0个评论 扫描二维码

使用类型保护来解决 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 应该能够帮助你自动完成。

一些常用的类型有:HTMLInputElement、HTMLButtonElement、HTMLAnchorElement、HTMLImageElement、HTMLTextAreaElement、HTMLDivElement 等。

如果你在 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 元素还是稍后在我们的代码中设置它的值 。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址