0

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?

3 respuestas 3

1

Una solución un poco mas limpia es usando Async/Await, lo cual te permite que sea mas legible y sin la necesidad de un setTimeout lo cual no es nada recomendable.

createTask = async (event) => {
        event.preventDefault();
        console.log('añadiendo task en bbdd..');

        // Añadir tarea en bbdd...
        const nombreTask = event.target.elements.nombretask.value;
        const responsePost = await axios.post('http://localhost:4000/api/task', {
            name: nombreTask,
            list: this.state.id_lista,
        }).catch(error => console.error(error));

        console.log(responsePost);
        // Get otra vez las tareas, y actualiza el estado
        let id = this.props.match.params.id_lista;
        const responseGet = await axios.get(`http://localhost:4000/api/tasks/${id}`)
                                       .catch(error => console.error(error));
        if(responseGet.data){ 
          // O alguna otra validacion para prevenir errores o arrays vacios
          this.setState({tasks: responseGet.data});  
        }

        //clear value of input:
        document.getElementById('create-list-form').reset();
};

También puedes hacerlo anidando promesas, cologando el get() dentro del .then(), siempre y cuando hagas un buen uso de arrows functions.


Async/Await:

Una función async puede contener una expresión await, la cual pausa la ejecución de la función asíncrona y espera la resolución de la Promise pasada y, a continuación, reanuda la ejecución de la función async y devuelve el valor resuelto.

En palabras mas simples, hace que tu ejecución sea secuencial, espera a que se resuelva la función puesta en el await (El POST o el GET, en este caso que son API calls y tienen demora de respuesta), cuando se resuelve pasa al siguiente paso.


PD: Si tienes acceso a la API lo ideal (en este caso) seria que el POST, retorne la nueva lista actualizada, cuando sea exitoso el proceso.

1
  • Al final lo he hecho anidando promesas como has dicho también, muchas gracias. el 5 dic. 2019 a las 18:03
1

El problema que estás teniendo es que crees que el axios.get se va a ejecutar después de que termine la petición axios.post, sin embargo JS no funciona así. Tu código lo que hará será lanzar la petición post e inmediatamente después hará el get.

Las promesas sirven para esperar una operación asíncrona, y lo que quieras que suceda cuando termine la operación lo especificas en el método then de la promesa, y un eventual error lo capturas con el método catch.

En tu caso, lo apropiado sería esto:

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)
        // Una vez que axios finalizó la petición, ahora sí actualizamos
        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();
    }).catch(error => console.error(error));
}

Como puedes ver, la operación de actualización la dejé dentro del then del axios.post que haces al principio.

Siempre ten en cuenta que cuando ejecutes una operación asíncrona, el resto del código se seguirá ejecutando sin importar cuánto tiempo demore esa operación, a menos que uses una función asíncrona (async/await).

0

Fue un error bastante bobo, evidentemente el GET no sacaba las tasks actualizadas porque no le daba tiempo, lo he solucionado añadiendo un simple setTimeOut, aunque si alguien tiene un enfoque más optimizado, lo agradecería:

let id = this.props.match.params.id_lista
        setTimeout(() => {
            axios.get(`http://localhost:4000/api/tasks/${id}`)
                .then((response) => {
                    let tasks = response.data;
                    this.setState({
                        tasks: tasks
                    })
                }).catch((error) => console.log(error))

            console.log(this.state.tasks)
        }, 3000)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.