Estoy haciendo una aplicación de lista de tareas en React, y ahora mismo la app carga las tareas (tasks
) desde una Api Rest cuando se carga la página:
this.state{
tasks: []
}
// Rellenando el array de tasks:
componentDidMount(){
axios.get(`http://localhost:4000/api/tasks/${id}`)
.then((response) => {
let tasks = response.data;
this.setState({
tasks: tasks
})
}).catch((error) => console.log(error))
}
Resulta que en la misma página se puede añadir localmente tareas mediante un input
Cuando se añaden, hago una petición POST para añadir la tarea:
createTask = (event) => {
event.preventDefault()
console.log('añadiendo task en bbdd...')
// Post new task in Api
const nombreTask = event.target.elements.nombretask.value;
axios.post('http://localhost:4000/api/task', {
name: nombreTask,
list: this.state.id_lista
}).then((res) => {
console.log(res)
}).catch(error => console.error(error))
}
<form>
<input />
<button type="submit" onClick={this.createTask}>Añadir Tarea</button>
</form>
Después de esto lo que necesito es que el array de tasks
en this.state
esté actualizado, entonces simplemente añado otra vez la peticion GET de las tareas, dentro del método createTask
createTask = (event) => {
event.preventDefault()
console.log('añadiendo task en bbdd..')
// Añadir tarea en bbdd...
const nombreTask = event.target.elements.nombretask.value;
axios.post('http://localhost:4000/api/task', {
name: nombreTask,
list: this.state.id_lista
}).then((res) => {
console.log(res)
}).catch(error => console.error(error))
// Get otra vez las tareas, y actualiza el estado
let id = this.props.match.params.id_lista
axios.get(`http://localhost:4000/api/tasks/${id}`)
.then((response) => {
let tasks = response.data;
this.setState({
tasks: tasks
})
}).catch((error) => console.log(error))
//clear value of input:
document.getElementById("create-list-form").reset();
}
El problema es que el HTML que se encarga de mostrar las tareas NO MUESTRA el estado actualizado:
<div className="the-list-popUp">
{this.state.tasks.map((item, i) =>
<ul>
<li className="item-lista" key={i}>{item.name}</li>
<div className="double-button-wrapper">
<button onClick={this.getTaskAsDone.bind(this, item)} className="btn btn-success">Hecho</button>
<button onClick={this.deleteTask.bind(this, item)} className="btn btn-secondary">Borrar</button>
</div>
</ul>
)}
</div>
Creía que en React cuando habia cambios en el DOM se actualizaba automáticamente sin refrescar toda la página. ¿Que es lo que necesito hacer para que el <div>
de arriba vuelva a "buscar" las tasks
en this.state
y así que muestre la última que acaba de añadir el usuario?