Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

229
Vistas
How to refresh page after deleting?

When I click on the delete button I can delete the item from the table, but I need to refresh the page manually. How can I get it to refresh automatically?

import { Link } from "react-router-dom";
import Swal from "sweetalert2";  

const EmployeesList = () => {

const[employees, setEmployees] =  useState([]);

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

  const init = () => {
    employeeService.getAll()
    .then(response => {
      setEmployees(response.data);
    })
    .catch(error => {
      console.log('Something wrong', error);
    })
  }

  const deleteSweetAlert = (id) => {
    Swal.fire({  
      title: 'Are you sure?',  
      text: 'User will have Admin Privileges',  
      icon: 'warning',  
      showCancelButton: true,  
      confirmButtonColor: '#3085d6',  
      cancelButtonColor: '#d33',  
      confirmButtonText: 'Yes!'  
    }).then(result => { 
        if(result.value) {
          employeeService.remove(id);
          init();
        }
      })
      .catch(error =>{
        console.log('something wrong ',error);
    })
  }

The button:

<button className="btn btn-danger ml-2" onClick={() => {deleteSweetAlert(employee.id)}}>Delete</button>
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

location.reload(false);

This method takes an optional parameter which by default is set to false. If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page.

about 4 years ago · Juan Pablo Isaza Denunciar

0

If you are using react-router v5, you can use useHistory hook

const EmployeesList = () => {
  const history = useHistory();
  const reload = () => {
    history.go(0);
  }
}

If you are using react-router v6, you can use useNavigate hook

const EmployeesList = () => {
  const navigate= useNavigate();
  const reload = () => {
    navigate(0);
  }
}

However, consider if you really need to reload the page or if you can rerender your components without reloading the page

about 4 years ago · Juan Pablo Isaza Denunciar

0

You can use react useEffect depencies to auto reload the information of employees

Like this...

import { Link } from "react-router-dom";
import Swal from "sweetalert2";  

const EmployeesList = () => {

const[employees, setEmployees] =  useState([]);

const[deleted,setDeleted ] =  useState(1);

  useEffect(() => {
    init();
  },[deleted])

  const init = () => {
    employeeService.getAll()
    .then(response => {
      setEmployees(response.data);
      setDeleted(prev=>prev+1) 
    })
    .catch(error => {
      console.log('Something wrong', error);
    })
  }

  const deleteSweetAlert = (id) => {
    Swal.fire({  
      title: 'Are you sure?',  
      text: 'User will have Admin Privileges',  
      icon: 'warning',  
      showCancelButton: true,  
      confirmButtonColor: '#3085d6',  
      cancelButtonColor: '#d33',  
      confirmButtonText: 'Yes!'  
    }).then(result => { 
        if(result.value) {
          employeeService.remove(id);
          init();
        }
      })
      .catch(error =>{
        console.log('something wrong ',error);
    })
  }

In react useEffect() hook get called very first time & the depencies passed to useEffect changes

Its is a dirty trick to make this automate

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda