Question

我使用以下代码生成＆＃34;可能未处理的承诺拒绝＆＃34;：

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

有关如何使用constructor in the official React docs
的详情

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
    }

react-native中可能未处理的promise拒绝

3 个答案: