Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Error Cannot read property 'map' of undefined

Olá.

Não estou conseguindo avançar de página no aplicativo, sempre apresenta a mensagem: Error Cannot read property 'map' of undefined

import { VStack, Image, Text, Box, Link } 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: 2,
      titulo: 'Agora, mais alguns dados sobre você:',
      EntradaTexto: [
        {
        id: 1,
          label: 'CEP',
          placeholder: 'Digite seu CEP'
        }
      ]
    }
  ]

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

  return (
    <VStack flex={1} alignItems="center" justifyContent="center" p={5}>
      <Image source={Logo} alt="Logo Voll" />

      <Titulo>
        {secoes[numSecao].titulo}
      </Titulo>
      <Box>
                    {
                        secoes[numSecao].entradaTexto.map(entrada => {
                            return <EntradaTexto label={entrada.
                            label} placeholder={entrada.placeholder} key={entrada.id} />
                        })
                    }
                </Box>
      <Botao onPress={() => avancarSecao()}>Avançar</Botao>

    </VStack>
  );
}
1 resposta
solução!

Oi Rogério, tudo bem?

O erro "Cannot read property 'map' of undefined" geralmente acontece quando você tenta usar o método map em uma variável que é undefined. No seu caso, parece que o erro está acontecendo porque você está tentando acessar a propriedade entradaTexto de um item que não existe na array secoes.

Analisando o seu código, percebi que você tem um erro de digitação na segunda seção do seu array secoes. Você escreveu EntradaTexto com a primeira letra maiúscula, quando deveria ser entradaTexto com a primeira letra minúscula. Veja:

{
  id: 2,
  titulo: 'Agora, mais alguns dados sobre você:',
  EntradaTexto: [ // Aqui está o erro
    {
      id: 1,
      label: 'CEP',
      placeholder: 'Digite seu CEP'
    }
  ]
}

Algumas linguagens case-sensitive, o que significa que ela diferencia letras maiúsculas de minúsculas. Portanto, EntradaTexto e entradaTexto são considerados diferentes.

Tente corrigir essa parte do seu código para:

{
  id: 2,
  titulo: 'Agora, mais alguns dados sobre você:',
  entradaTexto: [
    {
      id: 1,
      label: 'CEP',
      placeholder: 'Digite seu CEP'
    }
  ]
}

Vou deixar aqui o código completo para você:

import { VStack, Image, Text, Box, Link } from 'native-base'
import { useState } from 'react';
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';

export default function Login() {
  const [numSecao, setNumSecao] = useState(0);
  const secoes = [
    {
      id: 1,
      titulo: 'Insira alguns dados básicos',
      entradaTexto: [
        {
          id: 1,
          label: 'Nome',
          placeholder: 'Digite seu nome completo'
        },
        {
          id: 2,
          label: 'Email',
          placeholder: 'Digite seu email'
        },
      ]
    },
    {
      id: 2,
      titulo: 'Agora, mais alguns dados sobre você:',
      entradaTexto: [
        {
          id: 1,
          label: 'CEP',
          placeholder: 'Digite seu CEP'
        }
      ]
    }
  ]

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

  return (
    <VStack flex={1} alignItems="center" justifyContent="center" p={5}>
      <Image source={Logo} alt="Logo Voll" />

      <Titulo>
        {secoes[numSecao].titulo}
      </Titulo>
      <Box>
        {
          secoes[numSecao].entradaTexto.map(entrada => {
            return <EntradaTexto label={entrada.label} placeholder={entrada.placeholder} key={entrada.id} />
          })
        }
      </Box>
      <Botao onPress={() => avancarSecao()}>Avançar</Botao>
    </VStack>
  );
}

Um abraço e bons estudos.