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

Posted 2023-02-22

【中文标题】即使使用 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([''], '');