-3

Tenho uma API que me retorna os seguintes dados


[
  {
    "section": [
      {
        "type": "image",
        "url": "https://images.prismic.io/raion/b0d4c4e2-0e86-4b20-8ff5-d60fa067b967_Screenshot+from+2022-02-16+17-23-38.png?auto=compress,format",
        "alt": null,
        "copyright": null,
        "dimensions": {
          "width": 1102,
          "height": 651
        }
      }
    ]
  },
  {
    "section": [
      {
        "type": "heading2",
        "text": "What is Lorem Ipsum?",
        "spans": []
      },
      {
        "type": "paragraph",
        "text": "Lorem Ipsum is simply dummy text of the printing and  typesetting industry. Lorem Ipsum has been the industry's standard  dummy text ever since the 1500s, when an unknown printer took a galley  of type and scrambled it to make a type specimen book. It has survived  not only five centuries, but also the leap into electronic typesetting,  remaining essentially unchanged. It was popularised in the 1960s with  the release of Letraset sheets containing Lorem Ipsum passages, and more  recently with desktop publishing software like Aldus PageMaker  including versions of Lorem Ipsum.",
        "spans": [
          {
            "start": 0,
            "end": 11,
            "type": "strong"
          }
        ]
      }
   }
]
      

E quero listar os dados na mesma ordem por uma ta e/ou

import { Grid, Text, Image, Flex } from '@chakra-ui/react';
import { PostProps } from '../../pages/post/[slug]';


export default function Content({ post }: PostProps) {
  return (
    <Grid templateColumns={['1fr', '1fr', '1fr', '1fr']} gap={[5, 10, 16, 20]} my={['8', '20']}>
      {post.content.map((content, index) => (
        <Flex key={index}>
          {
            content.section.map((section, index) => (

              section.text &&
              <Text key={index}>
                {section.text}
              </Text>

                section.imageUrl &&
              <Image key={index} src={section.imageUrl} alt={section.imageAlt} w='auto' h='auto' />
            )) 
            }
        </Flex>

      )
      )}
    </Grid>
  )
}

mas eu recebo o seguinte erro

erro

any ')' expected.ts(1005) Cannot find name 'section'. Did you mean 'Selection'?ts(2552) lib.dom.d.ts(12983, 13): 'Selection' is declared here.

A IDE não identifica a minha segunda condição section.imageUrl

Como posso resolver isso?

1
  • Obrigado não tinha visto que estava aqui 2/03/2022 às 14:07

2 Respostas 2

0

Conforme respondido pelo Ruan Duarte, ficou faltando envolver sua instrução .map() em um bloco de execução de código bem aqui: content.section.map((section, index) => (. Você só pode fazer desse jeito se já for retornar algo como no seu primeiro .map():

{post.content.map((content, index) => (
        <Flex key={index}>

Veja que logo após a instrução map vc retornou um componente. Já no segundo map você está criando condições para retornar algo, então mais uma vez digo que a resposta do Ruan estaria correta conforme abaixo:

{
  content?.section?.map((section, index) => (
    <>
      {section.text && (
        <Text key={index}>
          {section.text}
        </Text>
      )}
      {section.imageUrl && (
        <Image key={index} src={section.imageUrl} alt={section.imageAlt} w='auto' h='auto' />
      )}
    </>
  ))
}```
-1

Eu não sei o retorno, mas:

{section?.imageUrl && (
   <div />
)}

esse

(
  <div />
)

é igual a

return (
  <div />
)

Corrigindo o seu código

{
  content?.section?.map((section, index) => (
    <>
      {section.text && (
        <Text key={index}>
          {section.text}
        </Text>
      )}
      {section.imageUrl && (
        <Image key={index} src={section.imageUrl} alt={section.imageAlt} w='auto' h='auto' />
      )}
    </>
  ))
}

Sua section sempre retorna

0

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