javascript - 在 Gatsby JS 中根据同一页面上的类别对文章进行分组

Question

我有一个 Gatsby JS 网站，我想在同一页面上显示按“家族”(基本上是类别)分组的文章列表。

这是我到目前为止所做的:

...

{edges.map(({ node }) => {

              let families = []
              _.each(edges, edge => {
                  if (_.get(edge, "node.frontmatter.family")) {
                      families = families.concat(node.frontmatter.family)
                  }
              })

              _.forEach(family => {
                  const articlesinfamily = () => {
                      return edges.filter(edge => edge.node.frontmatter.family === family)
                  }

           return (
                  <>
                  <div className="column is-3">
                    <div className="content">
                      <div className="title is-3">
                          {family}
                      </div>
                      <p>Description</p>
                    </div>
                  </div>
                  <div className="column is-9">

                    <div className="columns is-multiline">
                      {articlesinfamily.map(({ node }) => {
                        <div className="column is-4">
                          <div className="content">
                            <div className="title is-4">
                                {node.frontmatter.name}
                            </div>
                            <p>{node.frontmatter.headline}</p>     

                           </div>
                         </div>
                      })}

                    </div>
                  </div>
                  </>   
                )
              })
          })}



...

这段代码不起作用，但我认为这是我最接近的解决方案。 我得到的错误是

Expected an assignment or function call and instead saw an expression

在我有 {articlesinfamily.map(({ node }) => {....

的行上

关于如何进行这项工作有任何线索吗？有没有更好的方法来达到预期的结果？

非常感谢。

Answer 1

您在最初的问题中遇到的错误:

Expected an assignment or function call and instead saw an expression

...意味着您的map中的这个表达式:

{articlesinfamily.map(({ node }) => {
  <div className="column is-4">
    <div className="content">
      <div className="title is-4">
        {node.frontmatter.name}
      </div>
      <p>{node.frontmatter.headline}</p>     
    </div>
  </div>
})}

...实际上没有被使用。您没有将其分配给任何变量，也没有调用函数。

正如您在发布的答案中找到的那样，这里的解决方案是返回表达式(因此在函数中使用它):

{articlesinfamily.map(({ node }) => {
  return (
    <div className="column is-4">
      <div className="content">
        <div className="title is-4">
          {node.frontmatter.name}
        </div>
        <p>{node.frontmatter.headline}</p>     
      </div>
    </div>
  )
})}

您还可以使用更简洁的implicit return通过将大括号替换为圆括号:

{articlesinfamily.map(({ node }) => (
  <div className="column is-4">
    <div className="content">
      <div className="title is-4">
        {node.frontmatter.name}
      </div>
      <p>{node.frontmatter.headline}</p>     
    </div>
  </div>
))}