React - Promise - "this" 未定义

Question

我确定这是一个初学者问题，但实际上我无法弄清楚，为什么 this 是 undefined。但让我们从头开始。我正在使用 react 和 react-redux 来加载数据。在这种特殊情况下，我首先要加载项目的所有位置，然后加载验证文件。那是 2 个查询，所以我想确定，在开始加载验证之前，位置已完全加载。所以我想 - 哦，让我们在这里使用 promise。

它从方法 loadVerifications(event) 开始。在这个方法中，方法 loadProjectPositions(event) 被调用。我可以看到项目位置已正确加载。加载位置后，它应该加载验证文件 (.then(()...)。实际上在这个.then()方法中，this是未定义的，但是为什么？

class Kundenkommunikation extends Component {
  constructor(p) {
    super(p);
    this.state = {
    };

    this.loadProjectPositions = this.loadProjectPositions.bind(this);
    this.loadVerifications = this.loadVerifications.bind(this);
  }

  loadProjectPositions(event) {
    return new Promise((resolve,reject) => {
      this.props.getProjektPositionenByProjektIdForModulId(13, event.value);
      resolve(this)
    })
  }

  loadVerifications(event) {
    this.loadProjectPositions(event)
    .then(() => {
      this.props.projektpositionen && Object.values(this.props.projektpositionen).map((position) => {
        if(position.nachweis != null) {
          this.props.createBericht(position.nachweis.id,'SherpaVerbinder');
        }
      });
    })
  }

更新：

即使我在构造函数中绑定 loadVerifications，它也不起作用。 this 保持 undefined.

Answer 1

您应该对 loadVerifications 使用 bind(this) 方法从外部函数获取组件的上下文，或者另一个是箭头函数 loadVerifications= (event) => {...}

Answer 2

好的，感谢所有提示和提示。最近发现，Chrome 出于某种原因没有显示数据，但数据是可用的。我可以通过简单地在代码中添加一个 console.log(this.props) 来找出答案，然后它向我展示了所有 props 并且我能够看到 this 不是 undefined.

但真正的问题是此时没有加载数据。所以我需要在方法 loadProjectPositions 中添加一个 then 以确保在解析 Promise.

之前返回数据

loadProjectPositions(event) {
    return new Promise((resolve,reject) => {
      this.props.getProjektPositionenByProjektIdForModulId(13, event.value)
      .then(() => {
        resolve(this)
      });
    })
}

添加这个之后，当时所有数据都被正确加载，然后一切正常。

React - Promise - "this" 未定义

React - Promise - "this" is undefined

javascript

reactjs

es6-promise

react-redux