将节点结果限制为10 in.map循环

Question

我想在下面的返回中将结果限制为10。。

我不知道如何编码。我不能在最初的graphQL API调用中完成，因为它会为多个显示获取结果(我需要获取所有内容，然后过滤掉不需要的内容(

return (
<Carousel 
activeIndex={index} 
onSelect={handleSelect} 

>
{finearts.nodes 
&& finearts.nodes.map((arts) => (
imageQuery(arts) ?

<Carousel.Item className="" key={arts.databaseId}>

<Image src={arts.fineartfields.cloudlink} 
alt={arts.featuredImage.node.altText} 
className="carousel-image img-fluid shadow-sm"
width={arts.featuredImage.node.mediaDetails.width}
height={arts.featuredImage.node.mediaDetails.height}
/>
</Carousel.Item>

: null  
), [])}
</Carousel> 
)

Answer 1

您可以在finearts.nodes 上使用slice

finearts.nodes.slice(0,10(将返回数组中的前10个条目，这些条目可以进一步链接到映射函数；从而限制映射仅在finearts.nodes阵列的前10个条目上操作

将建议应用于您的代码-

return (
<Carousel 
activeIndex={index} 
onSelect={handleSelect} 

>
{finearts.nodes 
&& finearts.nodes.slice(0,10).map((arts) => (
imageQuery(arts) ?

<Carousel.Item className="" key={arts.databaseId}>

<Image src={arts.fineartfields.cloudlink} 
alt={arts.featuredImage.node.altText} 
className="carousel-image img-fluid shadow-sm"
width={arts.featuredImage.node.mediaDetails.width}
height={arts.featuredImage.node.mediaDetails.height}
/>
</Carousel.Item>

: null  
), [])}
</Carousel> 

)