Estoy intentando borrar una string en concreto dentro de un array que forma parte del estado de mi componente, una vez que se pulsa un botón. Lo logro hacer de forma local (en el estado del componente de React) pero mi código hace algo inesperado cuando lo hago también en el servidor (estoy utilizando una API REST).
El nombre del item y su botón de borrar correspondiente se renderizan condicionalmente atendiendo a como esté en ese momento items_local
state = {
items_local: [
"item numero 1", "item numero 2", "item numero 3"
]}
<div className="items-container">
{this.state.items_local.map((item, i) =>
<div>
<li key={i} data-id={item.id}>{item.name}
<button onClick={this.deleteTask.bind(this, item.id)}>Borrar</button>
</li>
</div>
)}
Cuando le doy a borrar el "item numero 1"
correctamente se borra. Sin embargo en el servidor (en mi base de datos local) se borra el "item numero 3"
.
Sospecho que es por la manera en cómo estoy utilizando el id
deleteTask = (id) => {
this.setState({
items_local: this.state.items_local.filter(function (item) {
return item.id !== id
})
});
let taskToDelete = id;
axios.delete(`http://localhost:4000/api/task/${this.state.items_local[taskToDelete].idApi}`)
.then(() => console.log('task eliminada en backend'))
.catch((err) => console.log(err))
}
Con ese código de forma local si borra correctamente el item pinchado, pero borra uno diferente en el servidor. Sospecho que es por que cada vez que se añade un item se hace de esta manera:
this.setState(prevState => ({
items_local: [{ "name": nombreTask, "id": itemsCounter, idApi: "" }, ...prevState.items_local]
}))
Quizás debería hacerlo al revés? Pero entonces en el servidor si se borraría el correcto pero de forma local no.
Hay algun tipo de "buena practica" para este tipo de problema? Noto que este codigo no es muy limpio.