this is my first project in React. I've got this element <DragDropContext onDragEnd={(result) => this.HandleOnDragEnd(result)}>and after completing the drag it calls the following function where I get the error:
HandleOnDragEnd = (result) =>
{
const requestOptions = {
method: 'POST',
headers: { "Content-type":"application/json",
"Accept":"application/json",
"Accept-Encoding":"gzip, deflate, br" }
};
fetch(url, requestOptions)
.then(function(response){
if(!response.ok)
{
return response.statusText;
}
else{
const items = [...this.state.sets];
const itemReordered = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, itemReordered);
this.setState({sets: items});
}
})
}
The issue happens within the else statement. For some reason it thinks that this.state is undefined. So far everywhere I've checked it just says to either bind this with the function within the constructor or to use an arrow function which I have, so I don't understand what's causing this issue.
UPDATE 1
I'm able to console.log(this.state.sets); at the start of the function so my only assumption would be that it's not defined within the .then function for some reason. Is there a way around it?
The problem is that you are using function(){} instead of arrow function (() => {}).
This way the function is not inheriting the this from your class component, so this is undefined.
You can read more about arrow function and
thishere on MDN .
Convert your function(){} into an arrow function () => {}
or
.bind() your function using this as param (like function(){}.bind(this))
in order to solve the problem.