javascript - 将多个 const = 组合在一个数组中？

Question

如何将 const = menuGallery、menuCompany 和 menuTour 中的数据合并到一个数组中在 menuData 中调用(参见下面的代码)，以便我的 li 应该显示 const = menuData< 中所有三个的 graphQl 数据

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
        }
      }
    }
  }
`

每个内容都可以工作并单独映射，但我有多种内容类型组成应用程序页面并希望将它们一起列出。

Answer 1

听起来您想使用 spread operator将三个数组合并为一个长数组。

const menuData = [...menuGallery, ...menuCompany, ...menuTour]