Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

225
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda