Aula 21
Curso React: Componentes Controlados
Summary
Resumo do Transcrito
O usuário está depurando um código que envolve botões de rádio e identifica um problema de conflito. Aqui estão os principais pontos discutidos:
-
Questão Inicial:
- Ao clicar nos botões de rádio, apenas o botão inferior funcionava.
- O problema foi identificado como um conflito entre os botões com o mesmo valor e nome ("gênero").
-
Solução Proposta:
- Remover as opções duplicadas resolveu o problema, pois havia dois botões de rádio para "feminino" e "masculino" com o mesmo nome.
-
Aprendizados:
- O processo de depuração com
console.log()
foi discutido, embora não tenha resolvido o problema principal. - A importância do segundo argumento da função
map
, que é o índice do array.
- O processo de depuração com
-
Código e Estruturas:
- O usuário realiza uma limpeza do código, removendo
console.log()
desnecessários. - É enfatizado que um retorno implícito pode ser usado ao retornar componentes em funções de seta. Ao retornar, é possível omitir chaves e usar parênteses para simplicidade.
- O usuário realiza uma limpeza do código, removendo
-
Finalização:
- O usuário menciona a necessidade de verificar um erro que surgiu: "Expected token" durante a execução do
map
.
- O usuário menciona a necessidade de verificar um erro que surgiu: "Expected token" durante a execução do
Este resumo aborda os principais pontos de aprendizado e as soluções apresentadas pelo usuário durante o processo de depuração.
Video Transcript
Então, se você notar que, se eu clicar nesse cara aqui, só o de baixo funciona, não é?
Mas se eu clicar no de baixo, olha o que acontece.
Mas o que está acontecendo aqui?
Estamos loucos?
Não, o problema é que no name, esse cara aqui, a gente tem o radio list.
Mas também tem o radio, mas os caras estão duplicando, esses caras estão dentro do radio list.
Por isso que está dando conflito aí.
Os caras são os mesmos, então vamos remover eles e ver o que acontece.
Agora está tudo funcionando normal, não é?
O problema era o conflito dos opções que tinham o mesmo valor.
Tava no mesmo name, tinha o mesmo nome que era gênero.
E tinha duas botões de radio com o mesmo valor e dois botões de radio com o mesmo valor feminino.
Dois masculinos, dois femininos, para o mesmo nome que é gênero, então dava um conflito, então remova os e vai funcionar normalmente agora.
Espero que tenham gostado do debug aí, aprendemos console logs.
Nem que tinha inicialmente resolvido problema, mas aprendemos a dar um console log, debug e interpelação de string dessa maneira e sobre o segundo argumento da map, função de map, que na verdade é o índice da array.
E sempre precisa se tiver mais de uma opção, tem que ter parênteses.
Vou removê-los agora, que não precisamos mais de debugar.
Remover o console log, certo?
Dessa maneira.
O que é isso aqui?
O one-radar-fan nunca irá usar?
Vamos lá voltar no app.
Não precisamos mais usar esse rádio, então vou remover os imports do app para tirar o warning, certo?
Mais uma coisa aqui, só de leve essa fatoração.
Normalmente se você tiver uma função de flash, por exemplo, aqui no map e se você não fizer nada antes do return, você pode ometer, tirar essa aqui.
Isso é retornar o componente aqui.
Como?
Pega esse cara assim, põe aqui e põe assim.
Dessa maneira assim.
Entendeu? Não precisa das chaves.
É só botar o parênteses aqui e o componente dentro.
Já retorna esse cara aqui.
Implicit return, a gente chama.
Implicit return.
Da função de flash.
É o retorno implícito.
Por exemplo, assim.
Retorna a, é a mesma coisa assim, certo?
Já é o retorno implícito da variável chamada a.
Remove as chaves e deixa só a coisa que você quer retornar.
É a mesma maneira aqui do componente.
Porque é um componente que a gente precisa dos parênteses.
Entendeu?
Se você quiser retornar o objeto, por exemplo, também precisar do parênteses.
Porque se não confunde com a chave da função, que vai dar problemas para esse do parênteses, retorna esse objeto chamado João.
Mesma coisa desse aqui.
Certo? Return João.
Mesma coisa.
Proceder.
Salvar.
Voltar aqui o web.
Ah, o que é que aconteceu aqui?
Expective token.
Não sei o que.
Map Option.
Deuejo.
Deuejo.
Vamos ver.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: