Question

我多次遇到“对象可能为空”错误，通常我使用安全的“ if语句”以防返回空。

我有以下功能：

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef(null);
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

但是overlayEl.current收到错误“未定义对象”。所以我尝试了：

if (!overlayEl) {
    return null
  } else {
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

哪个没用。我也尝试过：

overlay && overlayEl.current.focus();

任何提示将不胜感激！谢谢

Answer 1

const overlayEl = useRef() as MutableRefObject<HTMLDivElement>;

它将overlayEl强制转换为已初始化的MutableRefObject，该对象是useRef的返回值：

function useRef<T = undefined>(): MutableRefObject<T | undefined>;

然而，在这种情况下，编译器将始终认为overlayEl具有值。

Answer 2

您也可以使用 ES2020 中引入的 optional chaining 代替“if”语句以获得更清晰的代码

const myRef = useRef<HTMLLinkElement>(null);

myRef.current?.focus();

您可以在 caniuse 查看其浏览器支持。

Answer 3

如@Shanon Jackson所述，为引用添加类型：

const linkRef = useRef<HTMLLinkElement>(null);

然后，请确保在使用null之前检查current的值：

if (linkRef.current !== null) {
  linkRef.current.focus();
}

这将满足Typescript。而任何一个都不是。

使用any或强制转换来“欺骗”编译器会破坏使用Typescript的目的，请不要这样做。

Answer 4

如果您真的知道执行时间没有错误，则只需输入：

 (overlayEl as any).current

如果不能更好地使用：

    if (typeof overlayEl.current === null) {          
      return;
    }

    try {
      // you code here ...
      overlay &&  overlayEl.current && overlayEl.current.focus();

    } catch(e){
       console.log("Real null >> ", e);     
    }

  // Suggest if i am wrong in syntax somewhere ,this is fast answer ;)

Answer 5

当您声明const overlayEl = useRef（null）; 将输出的类型设为null，因为这是它可以提供的大量信息的最佳推断，为打字稿提供更多信息，并且它将按预期工作。

尝试。...

 const overlayEl = useRef<HTMLDivElement>(null);

或者，如果您不在乎未定义的时间是执行这样的操作，则可以使用一些语法糖。

const overlayEl = useRef(document.createElement("div"))

使用上述语法，所有常见的DOM方法仅返回默认值，例如“ 0”，即overlayEl.offsetWidth，getBoundingClientRect等。

Answer 6

我刚刚做了const overlayEl: any = useRef(null);，它就通过了！

Answer 7

如果你不想给打字稿机会使用这个：

const iframe = useRef<HTMLIFrameElement | null>(null);

     if (
   typeof iframe !== "undefined" &&
   typeof iframe.current !== "undefined" &&
   iframe.current !== null
 ) {
   iframe?.current?.contentWindow='';
   );
 }

Answer 8

有时我们不仅使用 Ref 来保存元素，还使用像数据这样的值。不知何故，当我检查 if(something.current) 返回 something.current 时，即使我添加 && something.current!=null 也不工作，所以我发现：

某事。当前！它说打字稿我知道有一个价值并绕过这个问题。

Answer 9

我认为这比这里的其他答案更简洁：

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef<HTMLDivElement>(null);
  useEffect(() => {
    overlayEl.current!.focus();
  });
  return <div {...props} ref={overlayEl} />;
}

您指定引用的类型，并声明您知道它不为空。

打字稿，如何传递“对象可能为空”错误？

9 个答案: