错误可能未处理的承诺拒绝（反应和类）[重复]

Question

我希望在一个类中使用一个承诺，并取决于解决或拒绝是否执行我的组件类的另一个方法。 在这里我留下一个代码。

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)
  
    });

我创建了一个简单的承诺。 从 ComponentDidMount 我调用它。 在我调用另一种方法之后。 但从不调用它。 出现错误：

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

Answer 1

请使用.catch()：

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

所以总代码应该如下：

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;

它在“react”：“16.12.0”上正常工作。结果提示“FALLO”。