React - 在状态中设置 X 后 this.state.X 未定义 [重复]答案

【问题标题】：React - this.state.X is undefined after setting X in state [duplicate]React - 在状态中设置 X 后 this.state.X 未定义 [重复]
【发布时间】：2018-09-21 00:59:36
【问题描述】：

我正在尝试以状态存储用户数组。在数组中设置用户后，this.state.users 返回 undefined。

第一个日志：

(18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

第二个日志：

undefined

功能

$.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, endOfcontract: data.endOfcontract,employmentType:data.employmentType, salary: data.salary, phoneNumber: data.phoneNumber,employerId: data.employerId});
          console.log(this.state.users);
        }.bind(this),
        error: function(xhr, status, err){
            console.log(err);
        }
      });

这个

【问题讨论】：

可能有更好的重复候选。但是您的代码不起作用的主要原因是setState 是异步的。

标签： reactjs state

【解决方案1】：

你必须使用 setState 回调函数。

$.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, endOfcontract: data.endOfcontract,employmentType:data.employmentType, salary: data.salary, phoneNumber: data.phoneNumber,employerId: data.employerId},
            ()=>{
              console.log(this.state.users);
            });
        }.bind(this),
        error: function(xhr, status, err){
            console.log(err);
        }
      });

【讨论】：