React報錯之Object is possibly null的問題及解決方法

2022-07-30 14:00:48

型別守衛

使用型別守衛來解決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(() => {
    //

React報錯之Object is possibly null的問題及解決方法

目錄

型別守衛

熱門文章