将变量传递给在循环中调用的异步JavaScript函数（React）

我正在为我的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;
}

for（变量i=0；i

---

我当前收到一个错误，因为

此。props

未定义，因为

此

引用函数中的imgaray[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);
}

---

您最好使用一个变量捕获道具，该变量包含对通过闭包访问的外部“this”的引用：

// This line here, now inside the function, use 'self' to refer to outer context
let self = this;
for (var i = 0; i < a; i++) {

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

  imgArray[i].onload = function() {
    // note call to self.props instead of this.props:
    self.props.actions.updateImage(this.index, this.width, this.height);
  }

  imgArray[i].src = path;
}

//这一行，现在在函数内部，使用“self”引用外部上下文
让自我=这个；
对于（变量i=0；i

人们通常在另一个变量中保存对“this”的引用，例如“that”或“_this”，即

var that=this

。然后可以在onload函数中使用该“that”变量。如果使用ES6+，也可以使用arrow函数，因为它们保留了“this”与创建函数的上下文的绑定。您还可以执行

.onload=function（）{…}.bind（this）

在onload函数中手动设置this变量。如果您选择了最后两个选项中的任何一个，则需要更改获取“this.width”和“height”的方式（提示：检查arguments变量）。谢谢！这对我有用。超级简单。这也是我的第一个想法，但它可能会打破对

This.width

和

This.height

的引用，我认为这是为了引用图像本身，而不是原始的

This

。谢谢！工作得很好。@BobDole很高兴帮助Mate谢谢你的回复！不幸的是，这些都不起作用。我尝试了第一个，得到了错误“无法读取未定义的属性‘index’”，因此imgaray[I]由于某种原因未定义。对于第二个，我得到了相同的错误（无法读取未定义的属性'index'）。第二个关键字中似乎没有定义“this”。不知道该怎么办：/是的，我可能写答案有点匆忙。结果表明，我提出的两个选项都不是很好，您的最佳选择几乎肯定是通过将

this

赋值给循环外的变量，然后访问该变量，将其传递到函数中（与nem035的答案非常相似）。我已经编辑了这篇文章。谢谢！我不确定哪一个答案是正确的，但这一个也是正确的：请确定另一个答案，就像您已经做的那样。他赢了我，所以我应该接受。