对前端显示的数据量有限制答案

【问题标题】：Having a limit to the amount of data shown in Frontend对前端显示的数据量有限制
【发布时间】：2021-10-19 01:30:05
【问题描述】：

目前我使用 Strapi 作为我的 CMS 和 NextJs/React 作为我的前端。我有一个 .map 函数来列出我的 starpi 客户端的所有数据，它工作正常，但我想限制我想显示的卡片数量。这就是我想要实现的目标，如果有超过 2 张卡片，第三张卡片只会显示一个链接，将您带到其他多余数据所在的页面：

目前这是我的代码：

<div class="flexbox-container" style={{margin:"70px", marginTop:"0px"}}>
        {
          posts &&
          posts.map((post) => (
            <div style={{ padding: "40px" }}>

          <div class="citizen-item" key={post.id}>
          {console.log(post)}          
            <div className="container6">
              <img
                style={{ height: "100%", width: "100%", minHeight:"180px" }}
                src={`http://localhost:1337${post.Thumbnail.url}`}
              />
              <div style={{textAlign:"center", color:"#E3AB50", padding:"10px", fontSize:"20px"}}>{post.Title}</div>
              <div style={{textAlign:"center", color:"#000", padding:"10px", fontSize:"15px"}}>Access to {post.Countries} countries</div>
              <div style={{display:"flex", justifyContent:"center", paddingTop:"20px", paddingBottom:"10px"}}>
              <button class="findButton">FIND OUT MORE</button>
              </div>
            </div>
          </div>
        </div>        
        ))}
        </div>
{/* Find Out more Card */}
      <div style={{padding:"40px"}}>
        <div class="citizen-item" style={{height:"100%", minHeight:"348.8px"}}>   
            <div className="container6" style={{display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"center"}}>
              
              <div style={{textAlign:"center", color:"#E3AB50", padding:"10px", fontSize:"20px"}}>CARIBBEAN CITIZENSHIP</div>
              <div style={{display:"flex", justifyContent:"center", paddingTop:"20px", paddingBottom:"10px"}}>
              <button class="findButton">APPLY NOW</button>
              </div>
              <div style={{textAlign:"center", color:"#0E2043", padding:"10px",paddingTop:"30px", fontSize:"15px"}}>COMPARE PROGRAMS</div>

            </div>
          </div>
        </div>
        </div>

【问题讨论】：

你有没有研究过如何实现它？你试过什么？

标签： javascript reactjs next.js strapi

【解决方案1】：

我将假设您正在访问您的 Strapi API 到集合。我的意思是，有两种方法可以实现你想要的。

将通过使用 strapi 查询构建一个满足您需要的端点。

对于这个选项，你可以查看：https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#queries

将通过使用 Strapi 标准 API 访问您的收藏。

在第二种情况下，您必须在请求中包含 API 参数。您将对START 和LIMIT 的一两个参数感兴趣。在第一种情况下，LIMIT 将允许您呼叫一个号码或项目。即

GET /posts?_limit=5

将返回 5 个帖子。

Start 的说服力将允许您对呼叫进行分页。即

GET /posts?_start=10&_limit=5

这将返回从 10 到 15 的项目。

【讨论】：