Object is possibly undefined even with if statement

Question

I've got a Typescript error TS2532: Object is possibly 'undefined'. I'm creating an SPA using Typescript, and on one of the pages, then you have the possibility of uploading a file. The backend is already written, so the file stored in state will be made into a binary code which the server side reads. The file setstate is set to undefined.

I've done a few searches, but the solutions don't seem to work for me. The first solution was to create an if statement:

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

Whenever terms is used in the logic portion, then I get the error mentioned above.

The other solution is to tell the compiler that it is definetly defined:

const terms = this.state!.uploadFile;

This still throws the same error, and thought I might have placed the ! in the wrong place, but when I move it to const terms = this.state.termSheet!; then that causes a new error when calling terms.getAsBinary() I get the error Property 'getAsBinary' does not exist on type 'never'

Code in context:

// 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_URL}RegisterIssue/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);

So, I'm a little stumped as to what the correct way to handle this error is.

So where is this if statement in the react component? Can you post more so we can see it in context? It might be something else rather than what you can see. — rrd, Nov 01 '19 at 07:54
possibly a duplicate of https://stackoverflow.com/questions/54884488/how-can-i-solve-the-error-ts2532-object-is-possibly-undefined — Abdullah Danyal, Nov 01 '19 at 08:05
Does this answer your question? [How can I solve the error 'TS2532: Object is possibly 'undefined'?](https://stackoverflow.com/questions/54884488/how-can-i-solve-the-error-ts2532-object-is-possibly-undefined) — wentjun, Oct 08 '20 at 16:56

score 2 · Accepted Answer · answered Nov 01 '19 at 08:07

2

It is because you check only state.uploadFile but use state.termSheet. There are two possible solutions:

You cat set a default value (in case terms is not defined):

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

Or you check the terms in the if statement, too:

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

answered Nov 01 '19 at 08:07

brandt.codes

853
2
8
15

1

That was my fault, corrected it now, I only use ```this.state.uploadFile``` – Akusas Nov 01 '19 at 08:11
1

This worked, set ```const terms = this.state.uploadFile ? this.state.uploadFile : new File([''], '');``` – Akusas Nov 01 '19 at 08:40

Object is possibly undefined even with if statement

1 Answers1