este es mi primer proyecto en React. Tengo este elemento <DragDropContext onDragEnd={(result) => this.HandleOnDragEnd(result)}> y después de completar el arrastre llama a la siguiente función donde aparece el 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}); } }) } El problema ocurre dentro de la instrucción else. Por alguna razón, cree que este estado no está definido. Hasta ahora, en todas partes que lo he comprobado, solo dice que enlace this con la función dentro del constructor o que use una función de flecha que tengo, por lo que no entiendo qué está causando este problema.
ACTUALIZAR 1
Puedo console.log(this.state.sets); al comienzo de la función, por lo que mi única suposición sería que no está definida dentro de la función .then por alguna razón. ¿Hay alguna forma de evitarlo?
El problema es que está utilizando function(){} en lugar de la función de flecha ( () => {} ).
De esta forma, la función no hereda this de su componente de clase, por lo que this está undefined .
Puede leer más sobre la función de flecha y
thisaquí en MDN .
Convierte tu function(){} en una función de flecha () => {}
o
.bind() su función usando this como parámetro (como function(){}.bind(this) )
para resolver el problema.