来自 contentful 的映射数据

Question

我一直在关注教程系列，并且我正在尝试推断我到目前为止所做的事情。

我已查询 return 产品详细信息，其中一种数据类型是 productFeatures 数组。我试图将其映射到一个列表，并期望它迭代出几个 li。但是，我最终得到了一个包含所有条目的 li。谁能帮我理解我在这里误解了什么？

这是我在产品功能组件中的尝试

import React from 'react'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import './spec.css'

const Spec = ({data}) =>(

    <div>
        <Tabs>
            <TabList>
            <Tab>Key Features</Tab>
            <Tab>Product Documents</Tab>
            </TabList>

            <TabPanel>
                <ul className="spec_list">
                    {data.allContentfulProductPage.edges.map(edge =>(
                        <li className="spec_list__item">{edge.node.productFeatures}</li>
                    ))}

                </ul>
            </TabPanel>
            <TabPanel>
            <h2>Any content 2</h2>
            </TabPanel>
        </Tabs>
    </div>
)

export default Spec

这是 graphql 查询 return

{
  "data": {
    "allContentfulProductPage": {
      "edges": [
        {
          "node": {
            "productTitle": "HD Pro Projector M220",
            "productPrice": 299,
            "productDescription": {
              "productDescription": "Designed for use with iPhone*, iPad*, MacBook, and Apple TV, the Miroir HD Projector M220 delivers HD-quality projection for streaming, entertainment, or presentation purposes. Even better, it's small enough to fit in your briefcase or bag. The projector uses a long-lasting LED light source and is built with Texas Instrument's DLP technology, which provides a cinema-quality movie experience.\n"
            },
            "productFeatures": [
              "Texas Instruments DLP Technology",
              "1280 x 720 (720p) native resolution",
              "1080p maximum input resolution",
              "Auto focus with vertical keystone",
              "HDMI input",
              "Viewable screen size from 20 to 100 inches",
              "Built-in lithium-ion battery",
              "Two hours of projecting time",
              "Two built-in 2-watt speakers; audio out jack (3.5mm)"
            ],
            "productImage": [
              {
                "file": {
                  "url": "//images.ctfassets.net/2nhrtgh52wv0/7u8biIRohlsl0OFKBWZ0ti/1dabcec4edd13dee708107929ec8e505/product-shot.jpg"
                }
              },
              {
                "file": {
                  "url": "//images.ctfassets.net/2nhrtgh52wv0/7u8biIRohlsl0OFKBWZ0ti/1dabcec4edd13dee708107929ec8e505/product-shot.jpg"
                }
              }
            ],
            "productSceneImage": {
              "file": {
                "url": "//images.ctfassets.net/2nhrtgh52wv0/6AzIFw9pZDsRtH1JI3A9XR/80ca785ffc60310690e337f7f936a74f/front-room-scene.jpg"
              }
            }
          }
        }
      ]
    }
  }
}

这是 graphql 查询 return

export const query = graphql`
  query ProductQuery {
    allContentfulProductPage{
      edges{
        node{
          productTitle
          productPrice
          productFeatures
          productDescription {
            productDescription
          }
        }
      }
    }
  }
`

Answer 1

我有一个问题要问你，你需要列表中包含这个值吗 "Texas Instruments DLP Technology", “1280 x 720 (720p) 原始分辨率”， "1080p 最大输入分辨率", "Auto focus with vertical keystone", "HDMI input", "Viewable screen size from 20 to 100 inches", "Built-in lithium-ion battery", "Two hours of projecting time", "Two built-in 2-watt speakers; audio out jack (3.5mm)" 如果是真的

<ul className="spec_list">
                    {data.allContentfulProductPage.edges.productFeatures.map(edge =>(
                        <li className="spec_list__item">{edge }</li>
                    ))}

                </ul>

Answer 2

试试下面的代码。由于 edges 是一个数组，而您正试图访问第一个元素以访问 productFeatures，因此您需要添加 edge[0].

<ul className="spec_list">
                {data.allContentfulProductPage.edges[0].node.productFeatures.map(feature =>(
                    <li className="spec_list__item">{feature}</li>
                ))}
</ul>

Answer 3

const data1={
  "data": {
    "allContentfulProductPage": {
      "edges": [
        {
          "node": {
            "productTitle": "HD Pro Projector M220",
            "productPrice": 299,
            "productDescription": {
              "productDescription": "Designed for use with iPhone*, iPad*, MacBook, and Apple TV, the Miroir HD Projector M220 delivers HD-quality projection for streaming, entertainment, or presentation purposes. Even better, it's small enough to fit in your briefcase or bag. The projector uses a long-lasting LED light source and is built with Texas Instrument's DLP technology, which provides a cinema-quality movie experience.\n"
            },
            "productFeatures": [
              "Texas Instruments DLP Technology",
              "1280 x 720 (720p) native resolution",
              "1080p maximum input resolution",
              "Auto focus with vertical keystone",
              "HDMI input",
              "Viewable screen size from 20 to 100 inches",
              "Built-in lithium-ion battery",
              "Two hours of projecting time",
              "Two built-in 2-watt speakers; audio out jack (3.5mm)"
            ],
            "productImage": [
              {
                "file": {
                  "url": "//images.ctfassets.net/2nhrtgh52wv0/7u8biIRohlsl0OFKBWZ0ti/1dabcec4edd13dee708107929ec8e505/product-shot.jpg"
                }
              },
              {
                "file": {
                  "url": "//images.ctfassets.net/2nhrtgh52wv0/7u8biIRohlsl0OFKBWZ0ti/1dabcec4edd13dee708107929ec8e505/product-shot.jpg"
                }
              }
            ],
            "productSceneImage": {
              "file": {
                "url": "//images.ctfassets.net/2nhrtgh52wv0/6AzIFw9pZDsRtH1JI3A9XR/80ca785ffc60310690e337f7f936a74f/front-room-scene.jpg"
              }
            }
          }
        }
      ]
    }
  }
}
 console.log(data1.data.allContentfulProductPage.edges.map(elem=>elem.node.productFeatures))

它适用于 javascript 你确定它不能正常工作吗

来自 contentful 的映射数据

Mapping data from contentful

reactjs

contentful

graphql

gatsby