如何将menuGallery等三个const数据合并到menuData数组渲染GraphQL数据？

嘿，我来帮你搞定这个问题！你需要把这三个从GraphQL拿到的edges数组合并成一个统一的menuData数组，这样就能一次性渲染所有数据啦。

核心思路 #

你之前的写法是把每个变量包装成对象放进数组，这会导致menuData里是三个独立的对象（每个对象包含各自的edges数组），而我们真正需要的是把三个数组里的所有元素合并到同一个数组中。

方法一：用concat合并数组 #

这是最直观的数组合并方式，concat会返回一个包含所有源数组元素的新数组：

render() {
  // 给get方法加默认空数组，避免数据未加载时出现undefined
  const menuGallery = get(this.props, 'data.allContentfulImageGallery.edges', [])
  const menuCompany = get(this.props, 'data.allContentfulCompanyPage.edges', [])
  const menuTour = get(this.props, 'data.allContentfulTourPage.edges', [])
  
  // 合并三个edges数组
  const menuData = menuGallery.concat(menuCompany, menuTour)
  
  return (
    <ul>
      {menuData.map((edge) => {
        const item = edge.node
        // 替换成你实际要渲染的字段，比如标题、链接等
        return <li key={item.id}>{item.title}</li>
      })}
    </ul>
  )
}

方法二：用ES6扩展运算符（更简洁） #

扩展运算符...可以把数组元素展开，直接合并成新数组：

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 (
    <ul>
      {menuData.map((edge) => {
        const item = edge.node
        // 如果不同类型的节点字段不一样，可以通过__typename区分渲染
        let displayContent
        switch(item.__typename) {
          case 'ContentfulImageGallery':
            displayContent = `Gallery: ${item.galleryTitle}`
            break
          case 'ContentfulCompanyPage':
            displayContent = `Company: ${item.companyName}`
            break
          case 'ContentfulTourPage':
            displayContent = `Tour: ${item.tourName}`
            break
          default:
            displayContent = 'Unknown item'
        }
        // 优先用节点的唯一ID做key，比index更稳定
        return <li key={item.id}>{displayContent}</li>
      })}
    </ul>
  )
}

注意事项 #

• 给get方法加默认空数组[]，防止某个数据未加载时出现undefined，避免合并数组时报错。
• 渲染<li>时一定要加唯一的key属性，优先用节点的id（比如item.id），比用index性能更好、更稳定。
• 如果三种类型的节点字段不同，可以通过item.__typename区分，渲染对应的内容。

内容的提问来源于stack exchange，提问作者Darren