Группировка статей по категориям на одной странице в 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>
                  </>   
                )
              })
          })}



...

Этот код не работает, но я думаю, что он ближе всего подходит к решению.Я получаю сообщение об ошибке:

Ожидается присвоение или вызов функции, и вместо этого я увидел выражение

в строке, где у меня есть {articleinfamily.map (({узел})=> {....

Любая подсказка о том, как сделать эту работу? Есть ли лучший способ достичь желаемого результата?

Большое спасибо.

Answer 1

Эта ошибка возникла в вашем первоначальном вопросе:

Ожидал присваивания или вызова функции и вместо этого увидел выражение

... означает, что это выражение внутри вашего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>
  )
})}

Вы также можете использовать более краткий неявный возврат , поменяв скобки в скобках:

{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>
))}

Answer 2

После дальнейших исследований я решил эту проблему с помощью Graphql 'group', например:

Страница запроса:

export const updatesQuery = graphql`
  query {
    allMarkdownRemark( filter: {  frontmatter: { contentType: { eq: "updates" } } } ) {
      group(field: frontmatter___family) {
        fieldValue
        totalCount
        edges {
          node {
            frontmatter {
              name
              headline
              path
            }
          }
        }
      }
    }
  }
`

А затем в компоненте страницы я использовал group.map ()сначала, а затем edge.map (), чтобы перехватить весь «контент» внутри группы.Вот так:

...

        {data.allMarkdownRemark.group.map(( { fieldValue, edges } ) => {

               return (

                  <>
                  <div className="column is-3">
                    <div className="content">
                      <div className="title">
                          {fieldValue}
                      </div>
                    </div>
                  </div>
                  <div className="column is-1"></div>
                  <div className="column is-8">

                      <div className="columns is-multiline">

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

                            return (

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

                                </div>
                              </div>

                            )    
                          })}

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

...

Надеюсь, это вам тоже поможет.