Reactjs 显示嵌套数据时出现问题

有一段时间我一直想弄明白这一点，并把我的头发拔出来，因为这应该很简单，但我似乎不知道如何正确地实施它

我用GatsbyJS和Contentful作为CMS

我想为管理员提供一种简单的方法，使用Contentful添加新文档，并让这些文档显示在站点的各个部分下（也是管理员添加的）

因此，基本上管理员将看到一个部分，如“分钟文档”，在该部分下，他们可以首先添加一个新的年度部分，如2018，然后在该部分下添加一个相应的文档（链接到PDF文件）在月份的标题下发布了该文件，如一月

在网站上，我希望这样显示，例如：

会议记录和文件 2018

• 一月
• 二月

等等

2017

• 一月
• 二月

等等

因此，管理员可以根据需要添加任意多的年度部分，并在12个文件中按月添加标题

到目前为止，我所能做到的最远的一点是能够显示我添加的所有文档的数组，但我还不知道如何最好地将它们分割到每年的节标题下

我当前的代码是这样的：

GrahpQL文档查询：

export const query = graphql`
  query NMODocs {
    allContentfulDocument {
      edges {
        node {
          id
          publishDate(formatString: "MMMM, YYYY")
          title
          file {
            file {
              url
            }
          }
        }
      }
    }
  }
`; 

我有一个数组：

    <ul>
      {data.allContentfulDocument.edges.map(({ node }) => (
        <DocListing key={node.id} doc={node} />
      ))}
    </ul>

{data.allContentfulDocument.edges.map（{node}）=>(
))}

和一个文档化组件：

import React from 'react';

const DocListing = ({ doc }) => (
  <li>
    <a title={doc.title} href={doc.file.file.url}>
      {doc.publishDate}
    </a>
  </li>
);

export default DocListing; 

从“React”导入React；
常量DocListing=（{doc}）=>(


);
导出默认文档列表；

这将导致当前链接到相应文档文件的日期列表。因此，为了重申我的问题，我想知道在相关年份部分标题下显示这些数据的最佳方式是什么

---

道歉，如果这是糟糕的解释，因为我仍在学习，并试图掌握许多新的东西，我对这个项目。所以我愿意接受任何关于如何处理这个问题的建议。

假设你有一个带有可访问日期的数组，你可以用一个小助手函数将它们分组

const list = ['2018-08-12', '2018-07-12', '2017-08-12'];

const groupedList = list.reduce((acc, item) => {
  const year = item.split('-')[0];

  if (!acc[year]) {
    acc[year] = []
  }

  acc[year].push(item);
  return acc;
}, {});

这将产生一个对象，包括每年的密钥

我不确定GraphQL查询是否可能实现这一点

另外，如果您依赖于contentful中的发布日期，这有点冒险，因为我认为当内容更新到最后一个发布日期时，它会发生变化（请仔细检查）。将其拆分为自己的内容类型可能是有意义的，这样您就可以自己设置日期并确保

希望有帮助。：）