javascript - 将变量传递给在循环中调用的异步 JavaScript 函数 (React)

Question

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

这是我的代码:

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 未定义，因为 this 在函数中引用 imgArray[i]，而不是全局上下文。

Answer 1

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

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