reactjs - Typ 'MutableRefObject' nie je priraditeľný k typu 'LegacyRef | undefined'

Vzhľadom na tento veľmi jednoduchý komponent:

const InputElement => React.forwardRef((props:any, ref) => {
    const handleRef = React.useRef<HTMLInputElement|undefined>()
    React.useImperativeHandle(ref, () => ({
        setChecked(checked:boolean) {
            if (handleRef.current) {
                handleRef.current.checked = checked;
            }
        }
    }), []);
    return (
        <input ref={ handleRef } type="checkbox" />  {/* <-- error here */}
    )
})

Mám túto chybu:

Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'.
        Type 'undefined' is not assignable to type 'HTMLInputElement | null'.ts(2322)

Čo to znamená? Ako opraviť túto chybu?

Odpoveď č. 1

Na opravu chyby by ste mali ako počiatočnú hodnotu háku useRef odovzdať null. Nemusíte pridávať | undefined:

React.useRef<HTMLInputElement>(null)

Chybové hlásenie hovorí, že vlastnosť ref očakáva odkaz typu HTMLInputElement | null, ale ak nič nepriradíte háčku useRef, vyhodnotí sa to ako HTMLInputElement | undefined a preto dostanete chybové hlásenie:

Type 'undefined' is not assignable to type 'HTMLInputElement | null'

Aby ste lepšie pochopili, čo sa deje, tu je spôsob, ako by ste mohli reprodukovať rovnakú chybu pomocou jednoduchej funkcie:

// This function expects a ref similar to how an element like <input> does
const someFunction = (ref: RefObject<HTMLElement | null>) => {};

// the type of `ref` below will be RefObject<HTMLElement | undefined>
const ref = useRef<HTMLElement>();

// throws `Type 'undefined' is not assignable to type 'HTMLElement | null'`
someFunction(ref);

Rovnako ako sa objaví chyba v atribúte ref, rovnaká chyba sa objaví aj pri volaní funkcie v poslednom riadku. Ak odovzdáte null do hooku useRef, typ ref sa potom stane RefObject<HTMLElement | null>, čo je kompatibilné s tým, čo funkcia očakáva, a preto sa nevygeneruje žiadna chyba.

Odpoveď č. 2

Mám rovnakú chybu nasledovne:

Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<Element> | undefined'.
Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Element>'.
Types of property 'current' are incompatible.
Type 'undefined' is not assignable to type 'Element | null'.ts(2322)

<Box
    as="button"
    sx={styles.notificationIconWrapper}
    ref={notificationsTrayRef}
    onClick={(e) => {
        e.preventDefault();
        setShowDropdown(!showDropdown);
    }}
    aria-label="notification-toggle-button"
>

Predchádzajúce kódy sú nasledovné:

const notificationsTrayRef = useRef();
useOnClickOutside(notificationsTrayRef, () => setShowDropDown(false));

export function useOnClickOutside(
    ref: React.MutableRefOBject<HTMLElement | undefined>,
    handler: any,
): void {

Odovzdaním null ako počiatočnej hodnoty do hooku useRef a ako prvého parametra typu ref v hooku useOnClickOutside, chyba bola z mojej strany práve teraz opravená.

Aktualizované kódy sú uvedené nižšie.

Súbor komponentu:

const notificationsTrayRef = useRef(null);
useOnClickOutside(notificationsTrayRef, () => setShowDropdown(false));

Súbor vlastného hooku:

export function useOnClickOutside(
ref: React.MutableRefObject<HTMLElement | undefined | null>,
handler: any,
): void {...}

Dúfam, že to pomôže ostatným.

Súvisiace články