反應本地可能未處理的諾言拒絕

Question

我正在使用以下代碼，產生“可能的未處理的承諾拒絕”：

constructor(props){
    super(props)

    DatabaseHandler.getInstance().getItems(function (items) {
            console.log(items)//successfully print data
            this.setState({inventoryArray: items}).bind(this)//causing error
        })
}

但是，以下代碼成功運行並在日志中打印響應：

constructor(props){
        super(props)
        DatabaseHandler.getInstance().getItems(function (items) {
            console.log(items)//Successfully print data
        })
    }

如何解決這個錯誤？

Answer 1

通常，在組件的constructor中進行異步調用是一個壞主意。 相反，我建議您按以下方式從componentDidMount進行這些調用

class MyComponent extends React.Component {
  componentDidMount() {
    DatabaseHandler.getInstance().getItems(function (items) {
        console.log(items)//Successfully print data
        this.setState({ inventoryArray: items });
    });
  }
}

在官方的React文檔中更多關於如何使用constructor 的信息

Answer 2

你也可以刪除bind ，並使用箭頭功能，因此this保持在組件的上下文。

constructor(props) {
  super(props)

  DatabaseHandler.getInstance().getItems((items) => {
    console.log(items)//successfully print data
    this.setState({inventoryArray: items})
  })
}

另外，您的.bind(this)在錯誤的位置。 它應該放在外部} （關閉function ）

constructor(props) {
  super(props)

  DatabaseHandler.getInstance().getItems(function (items) {
    console.log(items)
    this.setState({inventoryArray: items})
  }.bind(this)) // bind should come here
}

但是，在構造函數中發出api請求是一種錯誤的模式。 ReactJS Docs提到了componentDidMount是推薦這樣做的地方。

class YourComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      inventoryArray: [],
    }
  }

  componentDidMount() {
    DatabaseHandler.getInstance().getItems((items) => {
      console.log(items)//successfully print data
      this.setState({inventoryArray: items})
    })
  }
}

Answer 3

進行以下更改可以解決此問題：

 constructor(props) {
        super(props)
        this.onGetInventories = this.onGetInventories.bind(this)

        //Loading inventory list from server
        DatabaseHandler.getInstance().getItems(this.onGetInventories)
    }


    onGetInventories(items) {
        console.log(items)
        this.setState({inventoryArray: items})//Works
    }