Cuando hago clic en el botón Eliminar, puedo eliminar el elemento de la tabla, pero necesito actualizar la página manualmente. ¿Cómo puedo hacer que se actualice automáticamente?
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); }) }El botón:
<button className="btn btn-danger ml-2" onClick={() => {deleteSweetAlert(employee.id)}}>Delete</button>location.reload(false); Este método toma un parámetro opcional que, de forma predeterminada, se establece en false . Si se establece en true , el navegador realizará una actualización completa de la página desde el servidor y no desde la versión en caché de la página.
Si está utilizando react-router v5, puede usar useHistory hook
const EmployeesList = () => { const history = useHistory(); const reload = () => { history.go(0); } }Si está utilizando react-router v6, puede usar useNavigate hook
const EmployeesList = () => { const navigate= useNavigate(); const reload = () => { navigate(0); } }Sin embargo, considere si realmente necesita recargar la página o si puede volver a procesar sus componentes sin recargar la página.
Puede usar las dependencias de reacción useEffect para recargar automáticamente la información de los empleados
Como esto...
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); }) }En el gancho de reacción useEffect () se llama la primera vez y las dependencias pasan a los cambios de useEffect
Es un truco sucio hacer que esto se automatice.