反应本质中可能的未置信的承诺拒绝

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文档提到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
    }