Na página FormularioRestaurante, após submeter o formulário, eu adicionei o navigate(-1) (do React Router) para retornar à página anterior, que exibe a lista de restaurantes. No entanto, percebi que, ao voltar para a página, o nome atualizado do restaurante não aparece imediatamente, pois a lista não é recarregada. Minha solução foi envolver o navigate(-1) em um setTimeout, para que a atualização do backend tenha tempo de completar antes de navegar:
const navigate = useNavigate()
const aoSubmeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
evento.preventDefault()
if (parametros.id) {
axios.put(`${URL}${parametros.id}/`, { nome: nomeRestaurante })
.then((resposta) => {
alert(`Restaurante ${nomeRestaurante} atualizado com sucesso!`)
}).catch((erro) => {
console.log(erro)
});
} else {
axios.post(URL, { nome: nomeRestaurante })
.then((resposta) => {
alert(`Restaurante ${nomeRestaurante} cadastrado com sucesso!`)
}).catch((erro) => {
console.log(erro)
});
}
// volta para a tela anterior
setTimeout(() => {
navigate(-1)
}, 1000);
}
Embora isso funcione, não parece uma solução ideal. Quero saber: qual seria a melhor prática para lidar com essa situação e garantir que a página anterior exiba os dados atualizados?
Desde já, obrigado!
