0

estoy haciendo un proyecto y tengo este problema: Tengo un componente que se encarga de mostrar todas las tareas que se agregan, al momento de añadir un nueva, despliego una vista modal, la cual contiene el formulario con los datos necesarios para agregar tal tarea, el problema es que cuando se digitan los datos, y se procede a clickear el boton de agregar, en la base de datos, llega correctamente la tarea, sin embargo, mi componente padre que se encarga de mostrar las tareas sigue sin mostrar la tarea agregada, solo se muestra al recargar la pagina, e gustaria no tener que recargar la pagina, y que se muestren la tarea agregada en tiempo real.

De antemano les agradezco, este es mi codigo:

Componente modal (hijo)

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import './NuevaTarea.css'

export default function NuevaTarea (props){
    const [state, setState] = useState({
        titulo: '',
        vence: '',
    })

    const handleChange = (e) => {
        setState({
            ...state,
            [e.target.name] : e.target.value
        })
    }

    const handleClick = (e) => {
        e.preventDefault()
        console.log('Ejecutando fetch')
        fetch('/api/nuevatarea',{
            method: 'POST',
            body: JSON.stringify(state),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(response =>{ 
                setState({titulo: '', vence: ''})
            })
            .catch(err => console.log('Error al guardar tarea ->', err))
    }

    console.log('Estado del modal ->', state)
    const node = (
        <div className="focus">
            <div className="modal">
                <form action="#">
                    <div className="header-modal">
                        <h2>Nueva Tarea</h2>
                    </div>
                    <div className="nombre-tarea">
                        <input 
                            type="text" 
                            name="titulo"
                            placeholder="Escriba el nombre de la tarea" 
                            onChange={handleChange}
                            value={state.titulo}
                        />
                    </div>
                    <div className="body-modal">

                        <div className="body-modal-prioridad">
                            <p>Prioridad</p>
                            <select name="prioridad" onChange={handleChange}>
                                <option value="0"></option>
                                <option value="1">Baja</option>
                                <option value="2">Media</option>
                                <option value="3">Alta</option>
                            </select>
                        </div>
                        
                    </div>
                    <div>
                        <button onClick={handleClick}>AGREGAR</button>
                        <button onClick={props.onClose}>CANCELAR</button>
                    </div>
                    
                </form>
            </div>
        </div>
    )
    return ReactDOM.createPortal(node, document.getElementById('modal'))

Componente padre (El que contiene todas mis tareas agregadas y no se actualiza al agregar una tarea)

import React, { useState, useEffect } from 'react'
import NuevaTarea from '../modal/NuevaTarea/NuevaTarea'
import EditTarea from '../modal/EditarTarea/EditTarea'
import './Tareas.css'

export default function Tareas (){
    const [tareas, setTareas] = useState({
        data: [],
        showModalAdd: null,
    })

    useEffect(() => {
        fetch('/api/tareas')
        .then(res => res.json())
        .then(response => setTareas({...tareas, data: response }))
        .catch(err => console.log('Error al consultar tareas: ', err))
    },[])

    const handleEdit = (id) => {
        return console.log('El id ', id)
    }
    const handleDelete = (id) => {
        fetch(`/api/eliminar/${id}`, {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(response => {
                console.log('Response ->', response)
                setTareas({...tareas })
            })
            .catch(err => console.log('Error al eliminar tarea: ',err))
        
    }

    return (
        <>
            <div className="settings">
                <div className="settings-sarch">
                    <i className="fas fa-search"></i>
                    <input type="search" placeholder="Buscar tarea..." />
                </div>
                <div className="settings-btn-add">
                    <button onClick={() => setTareas({...tareas, showModalAdd: true})}>NUEVA TAREA</button>
                </div>
            </div>
            {
                tareas.data.map((item, index) => {
                    return(
                        <div className="tarea" key={index}>
                            <div className="tarea-data">
                                <input type="checkbox" />
                                <p>{item.titulo}</p>
                            </div>
                            <div className="tarea-fecha">
                                <p>{item.vence}</p>
                            </div>
                            <div className="tarea-settings">
                                <i className="fas fa-pen"
                                    onClick={() =>{
                                        handleEdit(item._id)
                                        setTareas({...tareas, showModalEdit: true})
                                    }}></i>
                                <i className="fas fa-trash" onClick={() => handleDelete(item._id)}></i>
                            </div>
                            
                        </div>
                    )
                })
            }

            {
                tareas.showModalAdd && <NuevaTarea onClose={() => setTareas({...tareas, showModalAdd: null})}/>
            }
        </>
    )
}

1 respuesta 1

0

Para que se actualicen las tareas tienes 2 opciones:

  • agregar a la lista de tareas la nueva tarea creada
  • volver a hacer la consulta (fetch) a la API cada vez que se crea una nueva tarea.

Para ambas opciones puedes pasarle una callback desde el componente padre al componente NuevaTarea y llamarla luego de que finalice la request de POST /api/nuevatarea.

const handleClick = (e) => {
        e.preventDefault()
        console.log('Ejecutando fetch')
        fetch('/api/nuevatarea',{
            method: 'POST',
            body: JSON.stringify(state),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(response =>{ 
                setState({titulo: '', vence: ''})
                props.callback() // acá llamar a la callback si es necesario pasarle el id de la tarea (para la opción 1)
            })
            .catch(err => console.log('Error al guardar tarea ->', err))
    }

Para la opción 1:

La callback podría ser const callback = id => setTareas({...tareas, data: tareas.data.filter(t => t.id !== id)})

Para la opción 2 podría ser:

const getTareas = () => {
    fetch('/api/tareas')
        .then(res => res.json())
        .then(response => setTareas({...tareas, data: response }))
        .catch(err => console.log('Error al consultar tareas: ', err))
}

useEffect(() => {
   getTareas();
},[])

Y la callback sería el getTareas.

Espero haberte ayudado!

1
  • 1
    Muchísimas gracias, ya pude resolver el problema :D
    – Juan
    el 8 jul. 2020 a las 3:39

Tu Respuesta

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

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