Error Possible Unhandle promise rejection (React and Class)

Question

I Wish use a promise inside a Class and depend if resolve or reject do another method of class of my component. Here I leave a code.

var promise = new Promise( (resolve, reject) => {

  let name = 'DaveA'

  if (name === 'Dave') {
     resolve("Promise resolved successfully");
  }
  else {
     reject(Error("Promise rejected"));
  }
});

class App extends React.Component
{
  constructor(props){
    super(props);
    this.state = {
      name: '',
    }
   
  }
  Bien(result){
    alert("OK")
    this.setState({name: result});
  }
  Mal(error){
    alert("FALLO")
    this.setState({name: error});
  }
  componentDidMount() {
  
 
    let obj = {newName: ''};
   
    promise.then( result => {
     this.Bien(result)
  
    }, function(error) {
      this.Mal(error)
  
    });

I create a simple promise. The from ComponentDidMount i Call it. And after I call another method. but never calls it. appear an error:

 WARN     Possible Unhandled Promise Rejection (id: 0):
TypeError: this.Mal is not a function. (In 'this.Mal(error)', 'this.Mal' is undefined)

Remove function(error) {...} part and add .catch() in end part of promise.then(). Please check below answer. — NinjaDev, Feb 24 '21 at 14:15

score -1 · Answer 1 · answered Feb 24 '21 at 14:28

Please use .catch() as this:

componentDidMount() {
    let obj = {newName: ''};
    promise.then(result => {
     this.Bien(result)
    })
    .catch((error) => {
      this.Mal(error)
    });
  }

So total codes should be as following as:

import React, { Component } from 'react';

var promise = new Promise((resolve, reject) => {
    let name = 'DaveA'
    if (name === 'Dave') {
      resolve("Promise resolved successfully");
    }
    else {
      reject(Error("Promise rejected"));
    }
  });

class App extends React.Component
{
  constructor(props){
    super(props);
    this.state = {
      name: '',
    }
  }

  Bien(result) {
    alert("OK")
    this.setState({name: result});
  }

  Mal(error) {
    alert("FALLO")
    this.setState({name: error});
  }

  componentDidMount() {
    let obj = {newName: ''};
    promise.then(result => {
     this.Bien(result)
    })
    .catch(error => {
      this.Mal(error)
    });
  }

  render() {
    return <></>
  }
}

export default App;

It's working correctly on "react": "16.12.0". The result alerted "FALLO".

No, don't use `catch`. [Using `.then(…, …)` is totally fine](https://stackoverflow.com/q/24662289/1048572), especially in the OP's case. — Bergi, Feb 24 '21 at 21:02
Of course you can. Notice `catch` is just an alias for another `then` call with the handler as the second argument. — Bergi, Feb 24 '21 at 22:15

Error Possible Unhandle promise rejection (React and Class)

1 Answers1