显示前6篇文章
我是新来盖茨比的。所以我想展示在WordPress上发布的前6篇文章，这里是我的组件内容：
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篇文章？
谢谢！
回答 1
Stack Overflow用户
发布于 2020-12-18 20:04:46
data.allWordpressPost.edges[0]是你的第一篇文章，因为你的数据存储在is节点中，所以你不能映射它。首先，如果你想要你的前6篇文章，你需要添加limit GraphQL选项：
graphql`{
allWordpressPost(
filter: {categories: {elemMatch: {name: {eq: "Actualités"}}}},
limit: 6) {
edges {
node {
date
title
tags {
name
}
categories {
name
}
featured_media {
source_url
}
}
}
}
}`此外，如何增加以使其仅显示最近的6篇文章？
你需要在发布日期之前对DESC进行sort。类似于：
allWordpressPost(
filter: {categories: {elemMatch: {name: {eq: "Actualités"}}}},
limit: 6
sort: { order: DESC, fields: [date] }) 有关更多详细信息和排序，请查看Gatsby's GraphQL docs。
查询完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)。您可以通过article?.tags?.map添加ECMAScript 2020的可选链接功能，以便使用更少的代码实现相同的功能(如果您将Babel配置为编译它的话)。
https://stackoverflow.com/questions/65356525
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号