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

Question

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

目前这是我的代码：

<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>

Answer 1

我假设您正在访问您的 strapi API 到 collections。我的意思是有两种方法可以实现你想要的。

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

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

将通过使用 strapi 标准 API 访问您的 collections。

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

GET /posts?_limit=5

将 return 5 个帖子。

相信 Start 将允许您对呼叫进行分页。即

GET /posts?_start=10&_limit=5

这将 return 项从 10 到 15。

有关这方面的更多信息，请阅读： https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/content-api.html#api-parameters

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

Having a limit to the amount of data shown in Frontend

javascript

reactjs

strapi

next.js