Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como acessar um objeto dentro de outro objeto de um arquivo JSON no react-native com flatList

por Turi Pereira de Souza
| 147.8k xp | 95 posts
Nutricionista

Estou com dificuldade para acessar a propriedade de um objeto json que está dentro de outro objeto.

Esta é minha API https://my-json-server.typicode.com/turisouza/fotos-api/fotos

Quero acessar as propriedades dos comentários para poder renderizar na tela. Segue um exemplo de um objeto do meu json, quero conseguir acessar o usuario e o texto dos comentarios pela minha FlatList que segue mais abaixo

{
"id": 1,
"usuario": "Turí Souza",
"fotoPost": "https://litoralguia.com.br/wordpress/wp-content/files/litoralguia.com.br/2021/12/imagem1.png",
"fotoUsuario": "https://github.com/turisouza.png",
"legenda": "Conheça as melhores ondas do Brasil",
"likes": 230,
"comentarios": [
  {
    "usuario": "fernanda",
    "texto": "Eu quero!"
  },
  {
    "usuario": "luisalberto",
    "texto": "Já surfei ai"
  },
  {
    "usuario": "marcosmonteiro",
    "texto": "Meu lar"
  }
]

Segue minha FlatList

<FlatList
  keyExtractor={item => String(item.id)}
  data={fotos}
  renderItem={({item}) => (
    <View>
      <View style={estilos.perfil}>
        <Image
          source={{uri: item.fotoUsuario}}
          style={estilos.imagemPerfil}
        />
        {console.log(item.fotoUsuario)}
        <Text style={estilos.nomeDeUsuario}>{item.usuario}</Text>
      </View>

      <Image source={{uri: item.fotoPost}} style={estilos.imagemPostagem} />
      {console.log(item.fotoPost)}

      

      <Rodape
        curtidas={item.likes}
        legenda={item.legenda}
        usuario={item.usuario}
        comentariosTexto={item.comentarios.texto}
        comentariosUsuario={item.comentarios.usuario}
      />
    
    </View>
  )}
/>

Quanto tento acessar as entradas do texto e do usuario do comentário só consigo um UNDEFINED. O que devo fazer?

1 resposta
solução!
por Turi Pereira de Souza
| 147.8k xp | 95 posts
Nutricionista

Buscando aqui o ChatGpt me deu um caminho, não era exatamente o que eu queria, mas já tinha pensado nisso. Abri uma outra FlatList dentro da que já estava.

Segue a resposta dele:

Parece que você está enfrentando um problema ao acessar as propriedades dos comentários dentro do objeto JSON. O problema reside na forma como você está tentando acessar essas propriedades dentro da sua FlatList.

Dentro do renderItem da FlatList, você precisa iterar sobre os comentários de cada foto para renderizá-los corretamente. Você pode fazer isso usando outra FlatList ou um componente similar para renderizar os comentários dentro de cada item da lista.

Aqui está uma abordagem corrigida para acessar os comentários:

<FlatList
  keyExtractor={item => String(item.id)}
  data={fotos}
  renderItem={({item}) => (
    <View>
      <View style={estilos.perfil}>
        <Image
          source={{uri: item.fotoUsuario}}
          style={estilos.imagemPerfil}
        />
        <Text style={estilos.nomeDeUsuario}>{item.usuario}</Text>
      </View>

      <Image source={{uri: item.fotoPost}} style={estilos.imagemPostagem} />

      {/* Renderizar os comentários dentro de cada item */}
      <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={item.comentarios}
        renderItem={({item: comentario}) => (
          <View>
            <Text style={estilos.comentarioUsuario}>{comentario.usuario}</Text>
            <Text style={estilos.comentarioTexto}>{comentario.texto}</Text>
          </View>
        )}
      />

      <Rodape
        curtidas={item.likes}
        legenda={item.legenda}
        usuario={item.usuario}
      />
    </View>
  )}
/>

Com essa abordagem, a FlatList interna é usada para renderizar os comentários dentro de cada item da lista principal. Assim, você poderá acessar corretamente as propriedades de usuário e texto de cada comentário. Certifique-se de ajustar os estilos e outras propriedades conforme necessário.