Dar*_*ren 0 javascript reactjs graphql
如何在数组中组合数据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>
))}
Run Code Online (Sandbox Code Playgroud)
如果我将电流更改const menuData为常量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
}
}
}
}
`
Run Code Online (Sandbox Code Playgroud)
每个工作和单独映射,但我有多个内容类型组成应用程序页面,并希望将它们列在一起.
听起来好像你想使用扩展运算符将三个数组合成一个长数组.
const menuData = [...menuGallery, ...menuCompany, ...menuTour]
Run Code Online (Sandbox Code Playgroud)