如何在数组中将const =
menuGallery
,menuCompany
和menuTour
的数据合并到menuData
内的所有数据中(请参阅下面的代码)这样我的li
就会显示graphQl
const = menuData
数据
render() {
const menuGallery = get(this.props, 'data.allContentfulImageGallery.edges')
const menuCompany = get(this.props, 'data.allContentfulCompanyPage.edges')
const menuTour = get(this.props, 'data.allContentfulTourPage.edges')
const menuData = [{menuGallery},{menuCompany},{menuTour}]
return(
{menuData.map(({ node: page })=> (
<li className={slug === page.slug ? "selected" : ""} key={page.id}><a href={`/${page.slug}`}>{page.title}</a></li>
))}
如果我将当前const menuData
更改为const menuData = menuGallery
,它将显示来自allContentfulImageGallery
的数据,但在合并多个时,它们不会映射数据。
graphQl
查询
export const menuQuery = graphql`
query menuQuery($slug: String!) {
allContentfulCompanyPage(sort: {fields: [menuOrder], order: ASC}) {
edges {
node {
id
title
slug
}
}
}
allContentfulTourPage(sort: {fields: [menuOrder], order: ASC}) {
edges {
node {
id
title
slug
}
}
}
allContentfulImageGallery(sort: {fields: [menuOrder], order: ASC}) {
edges {
node {
id
title
slug
}
}
}
}
`
每个都可以单独映射,但我有多个内容类型构成了应用页面,并希望将它们列在一起。
答案 0 :(得分:5)
听起来您想使用spread operator将三个数组合并为一个长数组。
const menuData = [...menuGallery, ...menuCompany, ...menuTour]