React中如何在Promise回调内访问Props与State？报错求助

这个问题我太熟悉啦！你遇到的TypeError: Cannot read property 'props' of undefined，核心原因是Promise的then/catch回调里用了普通函数，导致this的指向不再是你的React组件实例。虽然你已经在构造函数里绑定了actionClickSignIn的this，但回调函数里的this是独立的，不会继承外层的组件this。

下面给你三种常用的解决方案，按推荐程度排序：

1. 使用箭头函数（最推荐） #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是你的组件实例），写法也最简洁：

actionClickSignIn() {
  let {username,password} = this.state;
  this.props.setName("John") // 正常工作
  UserAuth(username,password).then((res) => {
    this.props.setName(res.data.user.name) // 现在可以正常访问props了
    // 注意：不要直接修改this.state！必须用this.setState更新状态
    this.setState({ isLogin: true })
  }).catch((error) => {
    console.log(error);
  });
}

这里还要额外提醒你：永远不要直接赋值this.state.isLogin = true，React需要通过setState来追踪状态变化，触发组件重新渲染，直接修改state不会生效。

2. 提前保存组件的this到变量 #

在Promise调用前，把组件的this存到一个变量（比如self/that），然后在回调里用这个变量访问props/state：

actionClickSignIn() {
  let {username,password} = this.state;
  const self = this; // 保存组件实例的this
  this.props.setName("John") 
  UserAuth(username,password).then(function(res){
    self.props.setName(res.data.user.name)
    self.setState({ isLogin: true })
  }).catch(function (error) {
    console.log(error);
  });
}

这种方式在ES6箭头函数普及前很常用，现在虽然不如箭头函数简洁，但逻辑清晰，适合理解this指向的原理。

3. 给回调函数绑定this #

通过bind(this)把回调函数的this强制绑定到组件实例：

actionClickSignIn() {
  let {username,password} = this.state;
  this.props.setName("John") 
  UserAuth(username,password).then(function(res){
    this.props.setName(res.data.user.name)
    this.setState({ isLogin: true })
  }.bind(this)).catch(function (error) {
    console.log(error);
  }.bind(this));
}

这种方式需要给每个回调都绑定一次，代码会稍微繁琐一点，所以优先级不如前两种。

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