reactjs - Cum să elimini eroarea TS2722: Nu poți apela un obiect care poate fi 'undefined'?

Am o funcție care arată așa

let bcInst;
if(props.onBoundsChanged){
    bcInst = kakao.maps.event.addListener(map, 'bounds_changed',()=>{
        props.onBoundsChanged(map); //I get error here
    })
}

interfața props arătând astfel

interface IMapProps{
    mapId?: string;
    longitude: number;
    latitude: number;
    level:number;
    onBoundsChanged?:{
        (map:any) : void
    }
}

Chiar dacă verific dacă props.onBoundsChanged există într-o instrucțiune if, primesc eroarea TS2722: Cannot invoke an object which is possibly 'undefined' la poziția unde folosesc props.onBoundsChanged. Cum pot rezolva această problemă?

Răspuns #1

TypeScript spune că onBoundsChanged ar putea fi nedefinit pentru că l-ai definit ca o proprietate opțională (?) în interfața IMapProps:

onBoundsChanged?: {}

Verificarea ta pentru onBoundsChanged pentru o valoare truthy este corectă, dar ascultătorul de eveniment va fi invocat mai târziu, ceea ce înseamnă că onBoundsChanged ar putea fi indefinit, așa cum a specificat @basarat. Poți evita această eroare utilizând una dintre aceste în interiorul ascultătorului tău.

Verificați valoarea adevărată înainte de a apela onBoundsChanged

if(props.onBoundsChanged) onBoundsChanged(map)

Folosește operatorul optional chaining ?. pentru a accesa onBoundsChanged

props?.onBoundsChanged(map)

Unele resurse utile pentru învățare:

Puteți citi mai multe despre valorile truthy pe MDN aici. https://developer.mozilla.org/en-US/docs/Glossary/Truthy

Mai multe despre operatorul optional chaining ?. aici. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Răspuns #2

Am aceeași problemă ca mai jos. În cazul meu, codul meu este

 handleClick={(p: ActionFieldClickParam) =>
        this.props.handleClick({ p, index })
 }

Apoi, am rezolvat adăugând '?.' și am schimbat apelul funcției astfel: this.props.handleClick?.({ p, index })

În cazul tău, ar trebui să adaugi lângă funcția de apel:

props.onBoundsChanged?.(map)