反应-承诺-“此”未定义

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

您应使用bind（this）方法进行loadVerifications，以从外部函数获取组件的上下文，或者 另一个是箭头功能loadVerifications =（event）=> {...}

Answer 2

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

但是真正的问题是，此时没有加载数据。因此，我需要在方法then中添加loadProjectPositions，以确保在解决Promise之前已返回数据。

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

添加此内容之后，所有数据均在那时正确加载，然后一切正常。