限制循环中的映射项[重复]

Question

我搜索了其他帖子，但找不到我要找的东西。我正在循环访问来自 sanity api 的数据，但我想将其限制为仅返回前 4 个项目。实现这一目标的最佳方法是什么？这是有问题的代码

 {mappedPosts && mappedPosts && mappedPosts.map ( (post) => (
                    <Col className="mapped-posts" style={redLine} xs="12" lg="4">
                        <div style={imageContainerStyle} onClick={() => router.push(`/logos/${post.slug.current}`)} key={post.index} >
                                <img
                                    src={post.mainImage}
                                alt={post.title}
                                style={imgStyle}
                                layout="fill" />
                            <h3 style={titleStyle}>{post.title}</h3>
                            </div>
                    </Col>
                    )) }   

我可以在循环中做一些事情吗：

{mappedPosts && mappedPosts.length < 4 && mappedPosts.map ( (post) => (

或者有没有更好的方法来控制 map 函数返回多少数据？

Answer 1

您只能取前 4 项并在之后立即循环

mappedPost.splice(0, 4).map( (post)=> ....