-1

Tenho um array dentro de outro array e gostaria de imprimir na tela dentro de um <Text>, porém não estou tendo sucesso.

Os dados no state:

areas: [
  nomearea: 'Café',
  periodos: [
    {
      colaboradores: [
        {
          nome: 'João'
        }, 
        {...}, {...}, {...}
      ]
    }
  ]
]

Em render() estou tentando algo parecido:

<ScrollView>
    {
        this.state.areas.map(area => {
            area.periodos.map(periodo => {
                periodo.colaboradores.map(colaborador => {
                    return (
                        <Text>
                            {colaborador.nome}
                        </Text>
                    )
                })
            })
        }
    }
</ScrollView>

Acredito que seja algo em referência aos map(), return() e/ou { }, porém não encontro a forma correta de corrigir. No console.log() está correndo tudo como deveria.

2 Respostas 2

0

Existe um erro de sintaxe no state declarado. Da forma como está estruturado, deveria ser um array de objetos, onde cada objeto corresponde à uma área.

A estrutura abaixo deve funcionar com o seu código:

areas: [{
  nomearea: 'Café',
  periodos: [
    {
      colaboradores: [
        {
          nome: 'João'
        }, 
        {...}, {...}, {...}
      ]
    }
  ]
}, {
  nomearea: 'Aveia',
  periodos: [
    {
      colaboradores: [
        {
          nome: 'Maria'
        }, 
        {...}, {...}, {...}
      ]
    }
  ]
}, {...}]
2
  • Obrigado pela resposta, mas o problema persistiria. Acabei escrevendo o state errado mesmo. Commented 5/10/2021 às 14:32
  • A solução está no return. Não é impresso nada pois não há retorno da função. Commented 5/10/2021 às 14:34
0
<ScrollView>
    {
        this.state.areas.map(area => {
           return area.periodos.map(periodo => {
                return periodo.colaboradores.map(colaborador => {
                    return (
                        <Text>
                            {colaborador.nome}
                        </Text>
                    )
                })
            })
        }
    }
</ScrollView>

Bastava adicionar os return. Não estava sendo retornado nada ao componente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .