如何删除 TS2722：无法调用可能“未定义”的对象。错误？

IT技术 reactjs typescript

2021-05-15 22:01:34

我有一个看起来像这样的功能

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

props界面如下图

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

即使我在 if 语句中检查 props.onBoundsChanged，我也会收到 TS2722：无法调用可能是“未定义”的对象。在我使用 props.onBoundsChanged 的位置出错。我该如何解决这个问题？

3个回答

TypeScript 说您onBoundsChanged可能未定义，因为您已将其定义为(?)接口 IMapProps 中的可选属性：

onBoundsChanged?: {}

您的支票onBoundsChanged的truthyvalue是正确的，但该事件监听器会在稍后的时间，这意味着调用onBoundsChanged可能是不确定的像@basarat规定。您可以通过在侦听器中使用其中之一来避免此错误。

在调用之前检查真值 onBoundsChanged

if(props.onBoundsChanged) onBoundsChanged(map)

使用可选链 ?.操作符访问onBoundsChanged

props?.onBoundsChanged(map)

一些有用的学习资源：

您可以truthy在此处从 MDN 中阅读有关值的更多信息。 https://developer.mozilla.org/en-US/docs/Glossary/Truthy

更多关于optional chaining ?.这里的运营商。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

因为您的事件侦听器可能会在您完成检查之后被调用，所以 TypeScript 会抱怨

使固定

存储 TypeScript 知道有效的引用，例如

let bcInst;
if(props.onBoundsChanged){
    const {onBoundsChanged} = props; // STORE
    bcInst = kakao.maps.event.addListener(map, 'bounds_changed',()=>{
        onBoundsChanged(map); // OKAY
    })
}

或者在侦听器内移动检查。

我有与下面相同的问题。就我而言，我的代码是

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

然后，我通过添加 '?.' 解决了并更改了函数调用，例如this.props.handleClick?.({ p, index })

在您的情况下，您应该在调用函数旁边添加：

props.onBoundsChanged?.(map)

其它你可能感兴趣的问题

上一篇错误：字段类型必须是输入类型 - 无法将 qlType 传递到变异中下一篇无法读取未定义的 CompileError 的属性“类型”：始于未定义的 CSS 选择器“npm run build”