如何在反应盖茨比中映射此 JSON 文件

Posted 2023-03-08

【中文标题】如何在反应盖茨比中映射此 JSON 文件

【英文标题】：How to map this JSON file in react gatsby

【发布时间】：2021-06-15 02:19:40

【问题描述】：

我有这个 JSON 文件，我想在卡片中显示画廊内的信息，我该怎么做？有任何想法吗？非常感谢

[
    
        "slug": "camping",
        "img": "../assets/images/campingDetails.jpg",
        "name": "Camping",
        "description": "Acampada, campismo,​ campamento o el anglicismo camping​ hacen referencia a la actividad humana que consiste en colocar una vivienda temporal, ya sea portátil o improvisada, en un lugar con el fin de habitarla. También se denomina así al lugar físico donde se realiza esta actividad.",
        "gallery" : [
            
                 
                    "product" : [
                                  "imageC": "../assets/images/campingDetails.jpg",
                                   "nombrePro": "Horometro",
                                   "descripcionPro": "Marca las horas de uso"
                                  ,
                                  
                                  "imageC": "../assets/images/campingDetails.jpg",
                                   "nombrePro": "Plasticos",
                                   "descripcionPro": "Para motos honda desde los años 2008-2011"
                                  
                                ]
                
            
    ]
    
]

这是我在graphql中的查询，返回的信息一切正常，现在我需要映射

    detallesCategoriasJson(slug: eq: camping) 
      nombre
      descripcion
      img 
        childImageSharp 
          fluid 
            ...GatsbyImageSharpFluid
          
        
      
      galeria 
        producto 
          imageC 
            id
            base
            childImageSharp 
              fluid 
                ...GatsbyImageSharpFluid
              
            
          
          nombrePro
          descripcionPro
        
      
    
`;

现在我想在卡片中显示信息这是我的代码，但我不能，这是我的组件

import React from 'react'
import styled from 'styled-components'
import Layout from '../components/layout'
import Button from '../components/Button'
import  graphql  from 'gatsby';
import Image from 'gatsby-image';
import  Container, Row, Col,Carousel, Card from 'react-bootstrap'
import Logo from "../assets/images/logoimagen3.png"

import 'bootstrap/dist/css/bootstrap.min.css';

export const query = graphql`
  query ($slug : String! ) 
    detallesCategoriasJson(slug: eq: $slug) 
      nombre
      descripcion
      img 
        childImageSharp 
          fluid 
            ...GatsbyImageSharpFluid
          
        
      
      galeria 
        producto 
          imageC 
            id
            base
            childImageSharp 
              fluid 
                ...GatsbyImageSharpFluid
              
            
          
          nombrePro
          descripcionPro
        
      
    
  
`;


const templateDetalleCat = ( data ) => 

  const tD = data.detallesCategoriasJson;
  return (
    <Layout>
        <Container>
        <ProductsHeading> Productos de tD.nombre </ProductsHeading>
        <Row>
          tD.gallery.product.map(image => (
             <Col md=3>
             <Card className="mb-3">
               <Image 
                 fluid=image.gallery.product.imageC.childImageSharp.fluid
                 alt=image.gallery.product.imageC.base.split('.')[0]
                 className="card-img-top" 
               />
             <Card.Body>
               <Card.Title> Hello </Card.Title>
               <Card.Text>
                 <p> Hello </p>
               </Card.Text>
               <Button  target="_blank" href="https://www.google.com.ec" >Comprar</Button>
             </Card.Body>  
           </Card>
             </Col>
          )) 
          </Row>
        </Container>
      
    </Layout>
  )


export default templateDetalleCat

希望你能帮助我 问候。

【问题讨论】：

你能描述一下“我不能”吗？有什么问题？错误输出是什么？您的 GraphQL 查询显示西班牙语结构，GraphQL 查询显示英语结构。哪个是正确的？

对不起，我不能说我不知道​​该怎么做......我可以在卡片中显示图像，但是当我尝试将 nombrePro 添加为 Title 和 descriptionPro作为卡片的描述，它给我一个错误，说地图没有定义，而英文是正确的，我只是忘记翻译了。

【参考方案1】：

您的嵌套结构错误。在您的循环中，image 代表可迭代对象（products 的数组，因此，每个循环中的每个产品）。此外，如果gallery（或galeria，关于命名的问题仍然存在）是另一个数组，则需要嵌套循环或获取所需位置。我假设这是您的第一个职位 ([0])，但您可能需要更改它

import React from 'react'
import styled from 'styled-components'
import Layout from '../components/layout'
import Button from '../components/Button'
import  graphql  from 'gatsby';
import Image from 'gatsby-image';
import  Container, Row, Col,Carousel, Card from 'react-bootstrap'
import Logo from "../assets/images/logoimagen3.png"

import 'bootstrap/dist/css/bootstrap.min.css';

export const query = graphql`
  query ($slug : String! ) 
    detallesCategoriasJson(slug: eq: $slug) 
      nombre
      descripcion
      img 
        childImageSharp 
          fluid 
            ...GatsbyImageSharpFluid
          
        
      
      galeria 
        producto 
          imageC 
            id
            base
            childImageSharp 
              fluid 
                ...GatsbyImageSharpFluid
              
            
          
          nombrePro
          descripcionPro
        
      
    
  
`;


const templateDetalleCat = ( data ) => 

  const tD = data.detallesCategoriasJson;
  return (
    <Layout>
        <Container>
        <ProductsHeading> Productos de tD.nombre </ProductsHeading>
        <Row>
          tD.galeria[0].product.map(item => (
             <Col md=3>
             <Card className="mb-3">
               <Image 
                 fluid=item.imageC.childImageSharp.fluid
                 alt=item.imageC.base.split('.')[0]
                 className="card-img-top" 
               />
             <Card.Body>
               <Card.Title> item.nombrePro </Card.Title>
               <Card.Text>
                 <p> item.descriptionPro </p>
               </Card.Text>
               <Button  target="_blank" href="https://www.google.com.ec" >Comprar</Button>
             </Card.Body>  
           </Card>
             </Col>
          )) 
          </Row>
        </Container>
      
    </Layout>
  )


export default templateDetalleCat