javascript - 如何使用 Gatsby 映射两次？

Question

我想创建一个与显示类似的表 here (“Paslaugos”部分)，并允许客户端使用 WordPress 更改表格内容。

所以我循环播放并显示图像和标题，没有出现任何问题。但是，我不知道如何显示表格项目。在这种情况下，如何将项目映射两次？

更新

{node.acf.table_items.header.map(({ c }) => (
 <span>{c}</span>
))}

{node.acf.table_items.body[0].map(({ c }) => (
  <span>{c}</span>
 ))}

所以我有点明白了。这种方式将显示标题，但仅显示表中的第一项。我需要循环 body[0] 才能工作，但是我无法弄清楚确切的语法。

感谢 ZeroToMastery 论坛，正确的答案是这样的:

{node.acf.table_items.body.map(mappingBody => {
  return mappingBody.map(({ c, index }) => {
    return (
     <span key={index} className={classes.body}>
       {c}
     </span>
    )
  })
})}

当前结果

<StaticQuery
            query={graphql`
              {
                allWordpressPost(
                  filter: {
                    categories: { elemMatch: { name: { eq: "favours" } } }
                  }
                ) {
                  edges {
                    node {
                      id
                      acf {
                        favours_title
                        table_items {
                          body {
                            c
                          }
                          header {
                            c
                          }
                        }
                        favours_images {
                          localFile {
                            childImageSharp {
                              fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            `}
            render={data =>
              data.allWordpressPost.edges.map(({ node }) => (
                <div key={node.id} className={classes.item}>
                  <Img
                    className={classes.img}
                    fluid={
                      node.acf.favours_images.localFile.childImageSharp.fluid
                    }
                  />
                  <h2 className={classes.title}>{node.acf.favours_title}</h2>
                  <div className={classes.grid}>
                    {node.acf.table_items.header.map(({ header }) => (
                      <span>{header}</span>
                    ))}
                    {node.acf.table_items.body.map(({ body }) => (
                      <span>{body}</span>
                    ))}
                  </div>
                </div>
              ))
            }
          />

Answer 1

我假设 body 中的数据是一个二维嵌套数组，例如

node.acf.table_items.body = [['row1-columnA', 'row1-columnB'], ['row2-columnA', 'row2-columnB']];

要映射二维数组中的每个项目，您可以使用 map() 两次:

{node.acf.table_items.body.map(c => c.map(el => (
  <span>{el}</span>
)))}

或者，如果您知道每个子数组中有一定数量的项目，则可以使用方括号表示法来定位特定元素:

{node.acf.table_items.body.map(c => (
  <span>{c[0]}</span>
  <span>{c[1]}</span>
))}