React设置state后this.state.users为undefined的技术问题

这问题我太熟了！核心原因是ajax的success回调函数里的this指向不对——你用的是普通函数作为success回调，这里面的this指向的是jQuery ajax请求的上下文对象，不是你的React组件实例！所以你调用的this.setState根本不是组件的setState方法，自然组件的state里的users（还有其他字段）都没被正确设置，后续访问this.state.users就会返回undefined。

给你几个靠谱的解决办法：

方法1：使用箭头函数（最推荐） #

箭头函数会继承外层的this指向，也就是你的React组件实例，这样就能正确调用setState了：

$.ajax({
  url: url,
  cache: false,
  success: (data) => { // 改成箭头函数
    console.log(data.employees);
    this.setState({
      users: data.employees,
      employeeId: data.Id,
      firstName: data.firstName,
      lastName: data.lastName,
      email: data.email,
      trialPeriod: data.trialPeriod,
      dayOfStart: data.dayOfStart // 补全你的字段
    });
  }
})

方法2：提前保存组件的this到变量 #

在ajax调用之前，把组件的this存到比如that或者self变量里，回调里用这个变量访问组件：

const that = this; // 提前保存组件的this
$.ajax({
  url: url,
  cache: false,
  success: function(data) {
    console.log(data.employees);
    that.setState({ // 用that代替this
      users: data.employees,
      employeeId: data.Id,
      firstName: data.firstName,
      lastName: data.lastName,
      email: data.email,
      trialPeriod: data.trialPeriod,
      dayOfStart: data.dayOfStart
    });
  }
})

方法3：用bind绑定this #

把success回调函数的this绑定到组件实例上：

$.ajax({
  url: url,
  cache: false,
  success: function(data) {
    console.log(data.employees);
    this.setState({
      users: data.employees,
      employeeId: data.Id,
      firstName: data.firstName,
      lastName: data.lastName,
      email: data.email,
      trialPeriod: data.trialPeriod,
      dayOfStart: data.dayOfStart
    });
  }.bind(this) // 绑定组件的this
})

另外还要提醒你：setState是异步的！如果你在调用setState之后立刻打印this.state.users，也可能拿不到最新值。如果需要在state更新后做操作，要用到setState的第二个回调函数：

this.setState({
  // 你的state字段
}, () => {
  // 这里可以拿到更新后的state
  console.log(this.state.users);
});

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