Question

我正在盖茨比的一个自由作家网站上工作。我正在使用Sanity作为CMS。我正在按类别（而不是按日期）整理和整理其已发表著作的列表。我的代码可以正常工作，但是您将看到它不是很健壮。我在想有一种更有效的方法来完成我想做的事情。我认为对于那些对嵌套循环有更多经验的人来说，答案很明显。

我一直在尝试各种循环，当我尝试嵌套循环以捕获cats变量和writing变量的结果时，总是遇到问题。

const publishedList = () => {
  const data = useStaticQuery(graphql`
    query {
      allSanityPublishedWork {
        nodes {
          title
          category
          id
          publishedBy
          publishedDate
        }
        distinct(field: category)
      }
    }
  `);
  const writing = data.allSanityPublishedWork.nodes;
  const cats = data.allSanityPublishedWork.distinct;
  return (
    <div>
      <h3>{cats[0]}</h3>
      {writing
        .filter(pub => pub.category === cats[0])
        .map(pub => (
          <p>{pub.title}</p>
        ))}
      <h3>{cats[1]}</h3>
      {writing
        .filter(pub => pub.category === cats[1])
        .map(pub => (
          <p>{pub.title}</p>
        ))}
      <h3>{cats[2]}</h3>
      {writing
        .filter(pub => pub.category === cats[2])
        .map(pub => (
          <p>{pub.title}</p>
        ))}
    </div>
  );
};

export default publishedList;

正如您在我的代码示例中看到的那样，我依靠指定像cats[0]这样的数组号来完成此操作，这不是一种可靠的方法，因为我需要知道随着时间变化的类别的确切数目。应该有一种方法可以遍历此查询的结果，并以比我上面做的更有效和更有弹性的方式执行以下操作：

类别标题
- 文章名称，日期，发布者
- 文章名称，日期，发布者
- 文章名称，日期，发布者
类别标题
- 文章名称，日期，发布者
- 文章名称，日期，发布者
- 文章名称，日期，发布者
类别标题
- 文章名称，日期，发布者
- 文章名称，日期，发布者
- 文章名称，日期，发布者

等等。

Answer 1

您在寻找这个吗？

cats.map(cat => (
  <>
    <h3>{cat}</h3>
    {writing
      .filter(pub => pub.category === cat)
      .map(pub => (
       <p>{pub.title}</p>
    ))}
  </>
))

不过，如果可以影响GraphQL模式的外观，我强烈建议您以适合您更多需求的方式设计模式。

如何将Graphql查询结果正确分类到类别中，例如按类别组织博客文章

1 个答案: