将变量传递给循环调用的异步JavaScript函数(反应)

我正在为我的React项目编写一些JavaScript代码.该代码加载一系列图像,然后使用每个图像的尺寸更新状态.问题是当我调用onload函数时,this关键字引用附加到onload的对象.这意味着我无法再通过this.props访问道具.有没有办法将道具传递给功能？

这是我的代码：

for (var i = 0; i < a; i++) {

  var path = i + ".jpg";
  imgArray[i].index = i;

  imgArray[i].onload = function() {
    this.props.actions.updateImage(this.index, this.width, this.height);
  }

  imgArray[i].src = path;
}

我目前遇到一个错误,因为this.props是未定义的,因为它是指函数中的imgArray [i],而不是全局上下文.

解决方法:

一个简单的解决方案可能只是将上下文或props保存到变量中并使用它们：

const { props } = this;

// ...

imgArray[i].onload = function() {
  props.actions.updateImage(this.index, this.width, this.height);
}

如果发现可读性更高,还可以保存其他上下文：

const ctx = this;

// ...

imgArray[i].onload = function() {
  ctx.props.actions.updateImage(this.index, this.width, this.height);
}

标签：reactjs,asynchronous,this,react-props,javascript
来源： https://codeday.me/bug/20191110/2013735.html