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

Question

我有这个 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

希望你能帮助我问候。

标签： javascriptreactjsgraphqlgatsby

Answer 1

你的嵌套结构是错误的。在您的循环中，image, 代表可迭代对象（productsso 的数组，每个循环中的每个产品）。此外，如果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