1
resposta

[Bug] Cannot read property 'map' of undefined

Olá,

Estou tendo algumas dificuldades com esse erro de propriedade não definida:

O erro está sendo no checkbox.

import { VStack, Image, Text, Box, Link, Checkbox } from 'native-base' import { TouchableOpacity } from 'react-native'; import Logo from './Assets/Logo.png'; import { Botao } from './componentes/Botao'; import { EntradaTexto } from './componentes/EntradaTexto'; import { Titulo } from './componentes/Titulo'; import { useState } from 'react';

export default function Login() { const [numSecao, setNumSecao] = useState(0); const secoes = [ { id: 1, titulo: 'Insira alguns dados basicos', entradaTexto: [ { id: 1, label: 'Nome', placeholder: 'Digite seu nome completo' }, { id: 2, label: 'Email', placeholder: 'Digite seu nome email' }, { id: 3, label: 'Crie uma senha', placeholder: 'Insira sua senha' }, { id: 4, label: 'Repita a senha', placeholder: 'Insira sua senha' } ] }, { id: 2, titulo: 'Agora, mais alguns dados sobre você:', entradaTexto: [ { id: 1, label: 'CEP', placeholder: 'Digite seu CEP' }, { id: 2, label: 'Endereço', placeholder: 'Insira seu endereço' }, { id: 3, label: 'Numero', placeholder: 'Insira seu numero' }, { id: 4, label: 'Complemento', placeholder: 'Insira seu complemento' }, { id: 5, label: 'Telefone', placeholder: '(00) 00000-0000)' } ] }, { id: 3, titulo: 'Para finalizar, quais são os seus planos?', entradaTexto: [], checkbox: [ { id: 1, value: 'SulAmerica' }, { id: 2, value: 'Unimed' }, { id: 3, value: 'Bradesco' }, { id: 4, value: 'Amil' }, { id: 5, value: 'BioSaude' }, { id: 6, value: 'BioVida' }, { id: 7, value: 'Outros' }, { id: 8, value: 'Não tem plano' }

  ]
}

]

function avancarSecao(){ setNumSecao(numSecao+1) }

function voltarSecao(){ if (numSecao > 0) { setNumSecao(numSecao-1) } }

return (

  <Titulo>
    {secoes[numSecao].titulo}
  </Titulo>
  <Box> {
          secoes[numSecao].entradaTexto.map(entrada => {
            return <EntradaTexto label={entrada.label} 
                                 placeholder={entrada.placeholder} 
                                 key={entrada.id} 
                    />
          })
        }
  </Box>       
  <Box> {
          secoes[numSecao].checkbox.map(checkbox => 
            {
            return <Checkbox key={checkbox.id} value={checkbox.value}>
              {checkbox.value}
            </Checkbox>
          })
        }
  </Box>
  

  {numSecao > 0 && <Botao onPress={() => voltarSecao()} bgColor="gray.400" > Voltar</Botao>}
  <Botao onPress={() => avancarSecao()} mt={4}>Avançar</Botao>

</VStack>

); }

1 resposta

Acredito que seja porque nem todos os objetos na constante "secoes" possuem um "checkbox" definido. Para resolver, você pode adicionar um checkbox como array vazio em todos ou, o que eu sugiro, colocar uma pequena validação no seu código, como por exemplo:

secoes[numSecao].checkbox && secoes[numSecao].checkbox.map(checkbox => 
            {
            return <Checkbox key={checkbox.id} value={checkbox.value}>
              {checkbox.value}
            </Checkbox>
          })
        }

ou

 secoes[numSecao]?.checkbox?.map(checkbox => 
            {
            return <Checkbox key={checkbox.id} value={checkbox.value}>
              {checkbox.value}
            </Checkbox>
          })
        }

nesse segundo caso, o ponto de interrogação valida o valor dentro do objeto antes e só retorna se ele existir.