1

Estoy tratando de eliminar una fila de una tabla. El objeto que está en dicha fila se elimina correctamente de la base de datos, pero no consigo que se elimine del DOM en el mismo instante, sino que tengo que recargar la página para que desaparezca.

Estoy utilizando redux para el manejo del estado.

¿Cómo podría hacer que se borre en el instante?

Aquí renderizo la tabla y hago el dispatch para eliminar la fila

// Eliminar productos

    // Eliminar productos
    const handleEliminar = (e) => {
    
        dispatch( productoSeleccionado(e) );
        dispatch( eventStartDelete() );
    
    }

Y llamo a la función handleEliminar en un botón dentro de la tabla

    <table className="table table-dark table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th style={{ width: 100 }}>ID</th>
                <th style={{ width: 150 }}>Nombre</th>
                <th style={{ width: 150 }}>Precio</th>
                <th style={{ width: 150 }}>Stock</th>
                <th style={{ width: 150 }}>Acciones</th>
            </tr>
        </thead>
        <tbody>
            {body && body.map( b =>
                <tr key={b.id}>
                    <td>{b.id}</td>
                    <td>{b.nombre}</td>
                    <td>{b.precio}</td>
                    <td>{b.stock}</td>
                    <td>
                        <button 
                            className="btn btn-info btn-sm"
                            onClick={() => handleActua(b) }
                        >
                            Editar
                        </button>
                        &nbsp;
                        <button 
                            className="btn btn-danger btn-sm"
                            onClick={ () => handleEliminar(b) } 
                        >
                            Eliminar
                        </button>
                    </td>
                </tr>
            )}
        </tbody>
    </table>

Así se lanza la acción

    // Elimina de la BD
    export const eventStartDelete = () =>{
    
        return async( dispatch, getState ) => {
    
            const { id } = getState().coffe.active;
    
            try {
    
                const resp = await fetchConToken(`productos/${ id }`, {}, 'DELETE');
                const body = await resp.json();
    
                if( body.id ) {
                    dispatch( eventDeleted() )
                } else {
                    Swal.fire('Error', body.msg, 'error');
                }
    
            } catch (error) {
                console.log(error);
            }
    
        }
    }
    
    // Elimina el evento
    const eventDeleted = () => ({ type: types.eventDeleted });

Y por último el reducer

    // Elimina los eventos
    case types.eventDeleted:
        
        return {
            ...state,
            body: state.body.filter(
                b => ( b.id !== action.id ) 

            ),
            active: null
        }

Aquí ya he presionado el botón de eliminar

Como pueden ver, se ejecuta la acción de eliminar, en este caso el producto leche, pero este aún se encuentra en el store y no desaparece hasta que recargue la página.

Eliminar

4
  • Esta seguro que const { id } = getState().coffe.active si le trae el id seleccionado? Porque si ese active lo setea la funcion productoSeleccionado ahi puede estar el problema
    – Pipe
    el 29 may. 2021 a las 13:52
  • Si, el active lo setea la funcion productoSeleccionado. Esta mal que lo haga asi? En las acciones funciona asi: // Posiciona el producto en el campo active export const productoSeleccionado = ( usuario ) => ({ type: types.uiEventSetActive, payload: usuario }); Y en el reducer case types.uiEventSetActive: return { ...state, active: action.payload } Como deberia de hacerlo?
    – Nvidia99
    el 29 may. 2021 a las 14:36
  • Porque hasta donde tengo entendido, los dispatch no se ejecutan de manera sincrona, por lo tanto, cuando llamas al segundo dispatch no puedes estar seguro que el primero ya se ejecuto completamente, entonces es probable que por esa razón, el segundo dispatch te siga tomando los valores "anteriores"
    – Pipe
    el 31 may. 2021 a las 10:58
  • Gracias por la explicación, tiene mucho sentido ya que aveces si se ejecutaba como quería y otras veces no, agregué un setTimeOut con un tiempo de medio segundo al dispatch de cargar eventos en el useEffect, no creo que sea la mejor solución pero de momento me sirve. Gracias
    – Nvidia99
    el 31 may. 2021 a las 14:25

1 respuesta 1

0

Podrías utilizar un estado que se actualice cuando ejecutas la función para eliminar.

Primero lo creas:

const [updateTrigger, setUpdateTrigger] = useState({});

Luego creas un useEffect() (si es que no tienes uno creado ya) y entre los corchetes pones el estado:

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

Por último en handleEliminar() actualizas el estado con un valor random, por ejemplo así:

const handleEliminar = (e) => {

  dispatch( productoSeleccionado(e) );
  dispatch( eventStartDelete() );
  // Activar trigger
  setUpdateTrigger(Math.random())

}

De esa forma, el useEffect() al detectar cambios re-renderizará el componente y actualizará los cambios en el DOM al instante sin la necesidad de recargar la página.

1
  • 1
    Me fue muy util la respuesta! Lo unico que agregue fue un await al dispatch para eliminar el evento, ya que se disparaba de nuevo la accion de cargar los productos y luego se eliminaba, asi que ahora se elimina y luego con tu ayuda se cargan los productos. Gracias bro segunda vez que me salvas.
    – Nvidia99
    el 29 may. 2021 a las 14:56

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.