即使使用 if 语句,对象也可能未定义

Posted

技术标签:

【中文标题】即使使用 if 语句,对象也可能未定义【英文标题】:Object is possibly undefined even with if statement 【发布时间】:2020-02-27 12:49:19 【问题描述】:

我遇到了 Typescript 错误 TS2532: Object is possibly 'undefined'。我正在使用 Typescript 创建一个 SPA,在其中一个页面上,您可以上传文件。后端已经写好了,所以存放在 state 中的文件会被做成一个二进制代码,供服务器端读取。文件 setstate 设置为 undefined。

我进行了一些搜索,但这些解决方案似乎对我不起作用。第一个解决方案是创建一个 if 语句:

if (this.state.uploadFile !== undefined) 
  const terms = this.state.uploadFile;
  // Logic

只要在逻辑部分使用术语,就会出现上述错误。

另一种解决方案是告诉编译器它是明确定义的:

const terms = this.state!.uploadFile;

这仍然会引发相同的错误,并认为我可能已经放置了 !在错误的地方,但是当我将它移动到 const terms = this.state.termSheet!; 时,这会在调用 terms.getAsBinary() 时导致新的错误,我收到错误 Property 'getAsBinary' does not exist on type 'never'

上下文代码:

// Imports

class SubmitIssue extends React.Component<StylesProps> 
  state = 
    alert: false,
    amount: '',
    uploadFile: undefined,
    verify: false,
  

  handleAmountChange(e) 
    this.setState( amount: e.target.value );
  

  handleFileChange(e) 
    this.setState( uploadFile: e.target.files[0] );
  

  handleVerifyChange() 
    this.setState( verify: !this.state.verify );
  

  handleClick() 
    const config =  headers:  'Content-Type': 'multipart/form-data'  ;
    const bodyFormData = new FormData();
    bodyFormData.set('Amount', this.state.amount);
    bodyFormData.set('uploadFile', this.state.termSheet.getAsBinary());
    bodyFormData.set('Verify', this.state.verify.toString());

    axios.post(
      `$process.env.API_URLRegisterIssue/Create`,
      bodyFormData,
      config
    ).then(res => 
      console.log(res);
      this.setState( alert: true , function()  this.sendData(); );
    ).catch((error) => 
      console.log(error);
    )
  

  sendData() 
    const alertState = this.state.alert;
    this.props.parentAlertCallback(alertState);
    
  render() 
    return (
      // Design
    );
  

export default withStyles(styles)(SubmitIssue);

所以,我有点不知道处理这个错误的正确方法是什么。

【问题讨论】:

那么这个 if 语句在 react 组件中在哪里呢?您可以发布更多内容以便我们在上下文中查看吗?它可能是其他东西,而不是你能看到的。 可能是***.com/questions/54884488/…的副本 @rrd 在上下文中添加了代码 @AbdullahDanyal 这是我尝试过的解决方案之一 这能回答你的问题吗? How can I solve the error 'TS2532: Object is possibly 'undefined'? 【参考方案1】:

这是因为您只检查了state.uploadFile,但使用了state.termSheet。 有两种可能的解决方案:

你设置了一个默认值(以防terms未定义):

const terms = this.state.termSheet ? this.state.termSheet : defaultValue;

或者您也检查if 语句中的条款:

if (this.state.uploadFile && this.state.termSheet)

【讨论】:

那是我的错,现在改正,我只用this.state.uploadFile 这行得通,设置const terms = this.state.uploadFile ? this.state.uploadFile : new File([''], '');

以上是关于即使使用 if 语句,对象也可能未定义的主要内容,如果未能解决你的问题,请参考以下文章

即使对象已定义,也无法读取“未定义”的属性! [反应]

即使在 if (process) 块中使用,也未定义未捕获的进程? [复制]

即使未定义,也检查嵌套键是不是存在[重复]

返回值总是未定义

领域对象列表函数未定义,即使对象已定义且列表已填充

即使值存在,为啥对象键返回未定义