时间戳

首页 > 解决方案 > 显示前 6 篇文章

javascript - 显示前 6 篇文章

问题描述

我是盖茨比的新手。所以我想显示在 WordPress 中发表的前 6 篇文章这是我的 Component 内容：

import React from 'react';
import {graphql, StaticQuery} from 'gatsby';

const Actualites = () => (
    <StaticQuery query={graphql`{
        allWordpressPost(filter: {categories: {elemMatch: {name: {eq: "Actualités"}}}}) {
            edges {
                node {
                    date
                    title
                        tags {
                            name
                        }
                        categories {
                            name
                        }
                        featured_media {
                            source_url
                        }
                    }
                }
            }
        }`
    } render={data =>
                 {
                     return (
                         <div className="itemList">
                            <ul>
                                {data.allWordpressPost.edges[0].node.map(
                                    prop => {
                                        return(
                                            <li className="itemNews">
                                                <span>{prop.date}</span>
                                                {data.allWordpressPost.edges[0].node.tags.map(
                                                    prop => {
                                                        return(
                                                            <span>{prop.name}</span>
                                                        )
                                                    }
                                                )}
                                                {data.allWordpressPost.edges[0].node.featured_media.map(
                                                    prop => {
                                                        return(
                                                            <div className="itemImage">{prop.source_url}</div>
                                                        )
                                                    }
                                                )}
                                                <div className="itemTitle">
                                                    {prop.title}
                                                </div>
                                            </li>
                                        )
                                    }
                                )}

                            </ul>
                         </div>
                     )
                 }}
    />
);

export default Actualites;

我收到以下错误：

TypeError: data.allWordpressPost.edges[0].node.map is not a function

所以我想知道如何去做。此外，如何增加它只显示最近的 6 篇文章？

谢谢你 ！！！

标签： javascriptreactjswordpressgraphqlgatsby

解决方案

data.allWordpressPost.edges[0]是您的第一篇文章，因为您的数据存储在节点内部，因此您无法映射它。首先，如果您想要前 6 个帖子，您需要添加limitGraphQL 选项：

graphql`{
        allWordpressPost(
           filter: {categories: {elemMatch: {name: {eq: "Actualités"}}}}, 
           limit: 6) {
            edges {
                node {
                    date
                    title
                        tags {
                            name
                        }
                        categories {
                            name
                        }
                        featured_media {
                            source_url
                        }
                    }
                }
            }
        }`

此外，如何增加它只显示最近的 6 篇文章？

您需要在sort DESC发布日期之前。就像是：

allWordpressPost(
    filter: {categories: {elemMatch: {name: {eq: "Actualités"}}}}, 
    limit: 6
    sort: { order: DESC, fields: [date] })

有关更多详细信息和排序，请查看Gatsby 的 GraphQL 文档。

查询完 6 篇文章后，您需要遍历它们以打印它。

<ul>
  {data.allWordpressPost.edges.node.map((article) => {
    return (
      <li className="itemNews">
        <span>{article.date}</span>
        {article.tags.map((prop) => {
          return <span>{prop.name}</span>;
        })}
        {article.featured_media.map((prop) => {
          return <div className="itemImage">{article.source_url}</div>;
        })}
        <div className="itemTitle">{article.title}</div>
      </li>
    );
  })}
</ul>;

我已将可迭代变量重命名为，article而不是prop因为它更具可读性。因此，在每个循环中，您都在打印每篇文章。在主循环内部，您只需要遍历article获取tags和featured_media.

您的最终代码：

const Actualites = () => (
  <StaticQuery
    query={graphql`
      {
        allWordpressPost(
          filter: { categories: { elemMatch: { name: { eq: "Actualités" } } } },
          limit: 6,
          sort: { fields: [date], order: DESC }
        ) {
          edges {
            node {
              date
              title
              tags {
                name
              }
              categories {
                name
              }
              featured_media {
                source_url
              }
            }
          }
        }
      }
    `}
    render={(data) => {
      return (
        <div className="itemList">
          <ul>
            {data.allWordpressPost.edges.node.map((article) => {
              return (
                <li className="itemNews">
                  <span>{article.date}</span>
                  {article.tags && article.tags.map((prop) => {
                    return <span>{prop.name}</span>;
                  })}
                  {article.featured_media && article.featured_media.map((prop) => {
                    return (
                      <div className="itemImage">{article.source_url}</div>
                    );
                  })}
                  <div className="itemTitle">{article.title}</div>
                </li>
              );
            })}
          </ul>
          ;
        </div>
      );
    }}
  />
);

export default Actualites;

我添加了一个控件来检查一个帖子是否没有tags( article.tags && article.tags.map) 或featured_media( article.featured_media && article.featured_media.map)。如果您将 Babel 配置为编译它，您可以添加ECMAScript 2020的可选链接功能，article?.tags?.map以用更少的代码实现相同的功能。

推荐阅读