Promise.all().then()中this为undefined的绑定方法咨询

嘿，我来帮你理清这个this绑定的坑！你遇到的问题很常见——当你在Promise.all(...).then(...)的回调函数里调用this.setState时，回调里的this变成了undefined，这是因为普通函数作为回调时，它的this指向会脱离原组件的上下文（严格模式下默认就是undefined）。下面给你三种最常用的解决办法，结合你的代码场景来举例：

方法一：用箭头函数作为then的回调 #

箭头函数不会创建自己的this，它会继承外层作用域的this，这是现在最推荐的写法，简洁又省心：

// 假设你的Promise.all是这样的
Promise.all([
  // 这里放你的异步操作，比如你代码里的过滤逻辑
  Promise.resolve(this.state.productAll.filter(product => product.exchangeId === exchange.exchangeId)),
  Promise.resolve(this.state.productAll.filter(prod => /* 你的过滤条件 */))
])
.then(([productSource, productOptions]) => {
  // 这里的this就是组件实例，正常调用setState
  this.setState({
    productSource: productSource,
    productOptions: productOptions
  });
});

方法二：提前把this存成变量 #

在调用Promise.all之前，把当前组件的this存到一个变量（比如that或者self）里，然后在回调里用这个变量代替this：

const that = this; // 先把组件的this存下来
Promise.all([
  Promise.resolve(this.state.productAll.filter(product => product.exchangeId === exchange.exchangeId)),
  Promise.resolve(this.state.productAll.filter(prod => /* 你的过滤条件 */))
])
.then(function([productSource, productOptions]) {
  // 用that代替this，就能正常访问setState了
  that.setState({
    productSource: productSource,
    productOptions: productOptions
  });
});

方法三：用bind显式绑定this #

直接给then的回调函数绑定当前组件的this，强制让回调里的this指向组件实例：

Promise.all([
  Promise.resolve(this.state.productAll.filter(product => product.exchangeId === exchange.exchangeId)),
  Promise.resolve(this.state.productAll.filter(prod => /* 你的过滤条件 */))
])
.then(function([productSource, productOptions]) {
  this.setState({
    productSource: productSource,
    productOptions: productOptions
  });
}.bind(this)); // 这里bind(this)把回调的this绑定到组件实例

额外小技巧：如果用async/await的话，更简单 #

看你代码里用了await，如果你的代码本身就在一个async函数里，其实可以不用then，直接await Promise.all，这样this的上下文完全不会丢，写法更清爽：

async yourComponentMethod() {
  // 直接await Promise.all的结果
  const [productSource, productOptions] = await Promise.all([
    Promise.resolve(this.state.productAll.filter(product => product.exchangeId === exchange.exchangeId)),
    Promise.resolve(this.state.productAll.filter(prod => /* 你的过滤条件 */))
  ]);
  // 这里的this正常指向组件，直接调用setState就行
  this.setState({ productSource, productOptions });
}

内容的提问来源于stack exchange，提问作者Evan Park