javascript - 如何使用 Gatsby 映射两次?
问题描述
我想创建一个类似于此处显示的表格(“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>
))
}
/>
解决方案
我假设其中的数据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>
))}
推荐阅读
- oauth - How to create a OAuth token with gitlab for composer
- vba - 打开一个名称每天都在变化的文件
- python - 3d 网格上描述符的着色函数
- java - 下载二进制文件抛出 org.jvnet.mimepull.MIMEParsingException: java.io.IOException: Stream Closed
- scala - 如何从scala中的列表中创建一个元组?
- sql - 复杂的 JOIN 查询 SQL Server
- javascript - Cocos2djs 中的 FPS 下降
- matlab - 将文本文件中的整数存储到变量数组中
- ios - 使用手表和 iPhone 的蓝牙连接的距离
- python - Pytest、setup_method 和类级模拟