React - this.state.X is undefined after setting X in state

Question

Iam trying to store array of users in state. After setting users in array, this.state.users returns undefined.

First log:

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

Second log:

undefined

function

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

This

There might be a better duplicate candidate. But the main reason your code doesn't work is because `setState` is async. — Yury Tarabanko, Apr 11 '18 at 08:24

score 0 · Accepted Answer · answered Apr 11 '18 at 08:24

You have to use the setState callback function.

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

React - this.state.X is undefined after setting X in state

1 Answers1