Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setState')

Question

I am getting this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setState')

and this is my code:

class Table extends Component {
    constructor (props) {
        super(props);
        this.state = {
            employees: [],
        }
    }
    componentDidMount() {
        this.getEmployeeList();
    }
    getEmployeeList = () => {
        axios.get("employee/list")
        .then(function(response) {

            this.setState({
                employees: response.data,
            });

        });
        console.log(this.state.employees)
    }
     
    // Remaining codes
    
}

Answer 1

This is because the callback you pass in is a function expression, which has its own this binding.

To solve this error you can:

1. Use arrow functions:

getEmployeeList = () => {
  axios
    .get("employee/list")
    .then((response) => {
      this.setState({
        employees: response.data,
      });
    });
};

2. Save this to self variable, and call it instead:

getEmployeeList = () => {
  const self = this;
  axios
    .get("employee/list")
    .then(function (response) {
      self.setState({
        employees: response.data,
      });
    });
};

Answer 2

Here you are passing an anonymous function to the axios.then callback.

axios.get("employee/list")
.then(function(response) {

    this.setState({
        employees: response.data,
    });

});

This function has it's own this that has no setState property on it. To solve this issue, you have to either bind this like so:

axios.then(
  function (response) {
    this.setState({
      employees: response.data
    });
  }.bind(this)
);

Or use an arrow function, which will bind the outer this automatically

axios.then(
 (response) =>{

    this.setState({
      employees: response.data
    });
  }
);