Spring e React - 2026

28 - Alterar

Nesta etapa, vamos implementar a funcionalidade de Alterar, que permite editar os dados de uma pessoa já cadastrada.

Primeiro, criamos a função alterar, que envia uma requisição PUT para a API, atualizando os dados da pessoa:

// Alterar
const alterar = () => {
    fetch("http://localhost:8080/alterar/"+pessoa.id, {
        method: "PUT",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(pessoa)
    })
    .then(retorno => retorno.json())
    .then(p => {
        setPessoas(pessoas.map(obj => obj.id === p.id ? p : obj));
        cancelar();
    });
}

Explicando o código:

• fetch("http://localhost:8080/alterar/"+pessoa.id) – envia uma requisição PUT para a API, passando o ID da pessoa a ser atualizada.
• JSON.stringify(pessoa) – converte o objeto pessoa em JSON para envio no corpo da requisição.
• setPessoas(pessoas.map(...)) – atualiza a lista de pessoas no estado, substituindo o objeto alterado pelo novo.
• cancelar() – limpa o formulário e retorna para o estado inicial de cadastro.

Em seguida, passamos a função alterar para o componente Formulario:

<Formulario alterar={alterar} />

Dentro do componente, associamos a função ao botão Alterar:

<input type="button" onClick={alterar} value="Alterar" className="btn btn-primary" />

Com isso, ao clicar no botão Alterar, a pessoa selecionada é atualizada na API, a lista de pessoas é recarregada e o formulário é resetado.

No vídeo abaixo, mostro como implementar a funcionalidade de alteração de dados, integrando o frontend com o backend de forma completa.