Question

我很难找到如何在我的ContentfulCMS内容模块中的GatsbyJS中拆分数组的方法。

理想的结果是，我可以将featuredProducts的每个值包装到其自己的<div>标记中，并将其显示在页面上。

当前，我可以显示值，但只能显示为一个列出的字符串。我想知道如何将每个拆分成各自独立的值。

{
  "data": {
    "allContentfulFeaturedProduct": {
      "edges": [
        {
          "node": {
            "title": "Featured Products",
            "featuredProducts": [
              "pocket-t-shirt",
              "reversible-down-hoodie",
              "down-sweater"
            ]
          }
        }
      ]
    }
  }
}

组件外观

import React from 'react';
import { graphql, StaticQuery } from 'gatsby';

const Products = () => (
  <StaticQuery
    query={graphql`
      query MyQuery {
        allContentfulFeaturedProduct {
          edges {
            node {
              featuredProducts
            }
          }
        }
      }
    `}

    render={(data) => (
      <div class="featured-products">
        {
          data.allContentfulFeaturedProduct.edges.map((item, i) => (
            item.node.featuredProducts ? (
              <div class="product" key={i}>
                  {item.node.featuredProducts}
              </div>
            ) : (<div></div>)
          ))
        }
      </div>
    )}
  />
);

export default Products;

Answer 1

在盖茨比社区进行了一些挖掘和支持之后，解决方案是：

render={data => (
  <div class="featured-products">
    {data.allContentfulFeaturedProduct.edges.map(({ node }, i) => (
      <div class="product" key={i}>
        {node.featuredProducts.map(product => (
          <div>{product}</div>
        ))}
      </div>
    ))}
  </div>
)}

如何在Gatsby中映射数组？

1 个答案: