Tratando outros erros com o estado agregado | React: Function Components, uma abordagem moderna

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso React: Function Components, uma abordagem moderna, no capítulo Tratamento de erros e atividade Criando uma função de validação

por Levi Medeiros Magny

| 56.1k xp | 4 posts

Olá, tentei fazer uma validação simples dos outros inputs apenas verificando se os campos estavam vazios. Mas não consegui implementar utilizando o estado agregado:

const [erro, setErro] = useState({cpf:{valido: true, texto: ""}, input:{valido: true, texto: ""}})

pois, por exemplo, quando faço:

setErro({cpf:{valido: false, texto: "CPF deve ter 11 digitos"}});

, a outra propriedade (input) é sobrescrita, como o professor disse na aula. Gostaria de saber como eu faria para implementar essa outra validação?

2 respostas

solução!

por Mateus Henrique

| 969.5k xp | 1546 posts

Instrutor Desenvolvedor

31/08/2021

Fala Levi, tudo bem?

Para que não seja sobrescrito, você pode utilizar o spread operator para espalhar os elementos que ja tem no state e adicionar um novo elemento que seria o cpf, assim:

const novoEstado = [...erro, {cpf:{valido: false, texto: "CPF deve ter 11 digitos"}}]

O que estamos fazendo é espalhando os itens que ja existem na variável erro (que no caso são o input e cpf), que seria como se fizessemos assim:

const novoEstado [{cpf}, {input}]

E então, com virgula adicionamos junto a esses elementos o cpf, e como ja existe o cpf na nossa variável, ela será apenas substituida por esse novo cpf.

E por fim setamos o estado:

const novoEstado = [...erro, {cpf:{valido: false, texto: "CPF deve ter 11 digitos"}}]

setErro(novoEstado)

Espero ter ajudado, bons estudos :D

por Levi Medeiros Magny

| 56.1k xp | 4 posts

02/09/2021

Entendi, ajudou demais!!! Valeu :-D