【问题标题】：Trouble displaying nested data无法显示嵌套数据
【发布时间】：2019-01-06 06:51:41
【问题描述】：

现在被困了一段时间，试图解决这个问题并将我的头发拉出来，因为它应该很简单，但我似乎无法理解如何正确实施它。

我正在使用带有 Contentful 的 GatsbyJS 作为 CMS。

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

所以基本上管理员会看到诸如“Minutes Documents”之类的部分，在此之下，他们可以首先添加一个新的Year部分，例如2018 然后在该部分下的相应文档（链接到 PDF 文件）在该文档发布的月份的标题下，例如 January。

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

会议纪要文件

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>

还有一个 DocLising 组件：

import React from 'react';

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

export default DocListing;

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

抱歉，如果这解释得不好，因为我仍在学习并试图掌握这个项目中对我来说是新的很多东西。因此，我愿意接受有关如何解决此问题的任何建议或建议。

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

假设您有一个包含可访问日期的数组，您可以使用一个小辅助函数对它们进行分组。

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 查询是否可行。

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

希望对您有所帮助。 :)

【讨论】：