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
}
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
});
}
);
This is because the callback you pass in is a function expression, which has its own this binding.
To solve this error you can:
getEmployeeList = () => {
axios
.get("employee/list")
.then((response) => {
this.setState({
employees: response.data,
});
});
};
this to self variable, and call it instead:getEmployeeList = () => {
const self = this;
axios
.get("employee/list")
.then(function (response) {
self.setState({
employees: response.data,
});
});
};