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

Question

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

Answer 1

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

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

Answer 2

你最好的选择是通过使用一个变量来捕获道具，该变量包含对你通过闭包访问的外部 '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;
}

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

Passing Variable to Asynchronous JavaScript Function Invoked in Loop (React)

javascript

asynchronous

this

reactjs

react-props