Após analisar o código das aulas 3 e 4, referente a cadastro e edição, queria deixar a contribução de que provavelmente não precise fazer o seguinte:
const atualizarContato = async (id, contato) => {
return apiContatos.atualizar(id, contato).then((contatoAtualizado) => {
// Não há necessidade de atualizar a variável de estado
setContatos((listaAntiga) =>
listaAntiga.map((contato) => contato._id === id ? contatoAtualizado : contato))
return contatoAtualizado;
})
}
e aqui:
const addContatos = async (contato) => {
return apiContatos.criar(contato).then((novoContato) => {
// Não há necessidade de atualizar a variável de estado
setContatos((prev) => [...prev, novoContato]);
return novoContato;
});
};
Em ambos os casos há uma navegação para a rota principal "/" apos o cadastro e edição com sucesso, na qual existe o fetchContacts()
que irá sempre buscar os novos dados. Desta forma, ficaria mais limpo o código e fácil de entender assim:
const atualizarContato = async (id, contato) => {
return apiContatos.atualizar(id, contato).then((contatoAtualizado) => {
// colocar algum log
})
}
e aqui:
const addContatos = async (contato) => {
return apiContatos.criar(contato)
.then((novoContato) => {
// colocar algum log
});
};
Espero ter ajudado. Caso, tenha viajado, comente aqui o que você faria, por favor.