javascript - Strapi：如何通过 id 获取一个条目
问题描述
我目前正在一个网站上使用 Strapi 作为 CMS 和 Next.js (React) 在前端。该网站还有一个图像滑块，其中显然包含图像、标题和描述。这三样东西我现在想从我的名为 Banner (Banners) 的 Strapi Collection Type 中得到。我已经创建了一个函数来执行此操作，但它只返回所有三个条目（例如所有 Id 的所有标题）。
那么如何过滤请求以仅从一个特定 ID 获取一个条目？当前代码如下所示：（文件/components/image-slider.js：）
import React from "react";
const Slider = ({ }) => {
const [banners, setBanners] = React.useState(null);
React.useEffect(() => {
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners/");
const json = await res.json();
setBanners(json);
}
getBanners();
}, [])
if (typeof window !== 'undefined') {
// makes image slider working
}
return (
<div className="img-slider">
<div className="slide active">
<div className="info">
{banners ? banners.map((banner) => (
<h2 key={banner.Id}>{banner.Title}</h2>
)) : (
<div>Loading...</div>
)}
{banners ? banners.map((banner) => (
<p key={banner.Id}>{banner.Content}</p>
)) : (
<div>Loading...</div>
)}
</div>
{/* Until now I didn't try to get an image, because of the error I'm currently facing */}
</div>
<div className="slide">
<div className="info">
{banners ? banners.map((banner) => (
<h2 key={banner.Id}>{banner.Title}</h2>
)) : (
<div>Loading...</div>
)}
{banners ? banners.map((banner) => (
<h2 key={banner.Id}>{banner.Content}</h2>
)) : (
<div>Loading...</div>
)}
{/* Until now I didn't try to get an image, because of the error I'm currently facing */}
</div>
</div>
{/* Futher slides */}
<div className="navigation">
<div className="btn-navig active"></div>
<div className="btn-navig"></div>
<div className="btn-navig"></div>
</div>
</div>
)
}
export default Slider;
更新： 我从 Strapi API 返回的数据如下所示：（它只是填充了示例图像、标题和描述......）
[
{
"id":1,
"Title":"Musik",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-23T07:32:10.839Z",
"created_at":"2021-04-23T07:32:08.130Z",
"updated_at":"2021-04-23T07:32:10.883Z",
"Cover":[
{
"id":9,
"name":"we-love-pizza.jpg",
"alternativeText":null,
"caption":null,
"width":3782,
"height":2522,
"formats":{
"thumbnail":{
"name":"thumbnail_we-love-pizza.jpg",
"hash":"thumbnail_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":234,
"height":156,
"size":13.75,
"path":null,
"url":"/uploads/thumbnail_we_love_pizza_d16dd21274.jpg"
},
"large":{
"name":"large_we-love-pizza.jpg",
"hash":"large_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":667,
"size":180.46,
"path":null,
"url":"/uploads/large_we_love_pizza_d16dd21274.jpg"
},
"medium":{
"name":"medium_we-love-pizza.jpg",
"hash":"medium_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":500,
"size":106.25,
"path":null,
"url":"/uploads/medium_we_love_pizza_d16dd21274.jpg"
},
"small":{
"name":"small_we-love-pizza.jpg",
"hash":"small_we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":333,
"size":52.59,
"path":null,
"url":"/uploads/small_we_love_pizza_d16dd21274.jpg"
}
},
"hash":"we_love_pizza_d16dd21274",
"ext":".jpg",
"mime":"image/jpeg",
"size":955.02,
"url":"/uploads/we_love_pizza_d16dd21274.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:20.277Z",
"updated_at":"2021-04-20T17:42:20.277Z"
}
]
},
{
"id":2,
"Title":"Sport",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-24T11:56:58.633Z",
"created_at":"2021-04-24T11:56:56.191Z",
"updated_at":"2021-04-24T11:56:58.697Z",
"Cover":[
{
"id":8,
"name":"beautiful-picture.jpg",
"alternativeText":null,
"caption":null,
"width":3824,
"height":2548,
"formats":{
"thumbnail":{
"name":"thumbnail_beautiful-picture.jpg",
"hash":"thumbnail_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":234,
"height":156,
"size":6.44,
"path":null,
"url":"/uploads/thumbnail_beautiful_picture_06a43830c6.jpg"
},
"large":{
"name":"large_beautiful-picture.jpg",
"hash":"large_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":666,
"size":83.56,
"path":null,
"url":"/uploads/large_beautiful_picture_06a43830c6.jpg"
},
"medium":{
"name":"medium_beautiful-picture.jpg",
"hash":"medium_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":500,
"size":47.82,
"path":null,
"url":"/uploads/medium_beautiful_picture_06a43830c6.jpg"
},
"small":{
"name":"small_beautiful-picture.jpg",
"hash":"small_beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":333,
"size":23.36,
"path":null,
"url":"/uploads/small_beautiful_picture_06a43830c6.jpg"
}
},
"hash":"beautiful_picture_06a43830c6",
"ext":".jpg",
"mime":"image/jpeg",
"size":585.12,
"url":"/uploads/beautiful_picture_06a43830c6.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:20.163Z",
"updated_at":"2021-04-20T17:42:20.163Z"
}
]
},
{
"id":3,
"Title":"Kunst",
"Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"published_at":"2021-04-24T11:57:31.725Z",
"created_at":"2021-04-24T11:57:15.225Z",
"updated_at":"2021-04-24T11:57:31.794Z",
"Cover":[
{
"id":6,
"name":"this-shrimp-is-awesome.jpg",
"alternativeText":null,
"caption":null,
"width":1200,
"height":630,
"formats":{
"thumbnail":{
"name":"thumbnail_this-shrimp-is-awesome.jpg",
"hash":"thumbnail_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":245,
"height":129,
"size":9.43,
"path":null,
"url":"/uploads/thumbnail_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"large":{
"name":"large_this-shrimp-is-awesome.jpg",
"hash":"large_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":1000,
"height":525,
"size":72.87,
"path":null,
"url":"/uploads/large_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"medium":{
"name":"medium_this-shrimp-is-awesome.jpg",
"hash":"medium_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":750,
"height":394,
"size":48.38,
"path":null,
"url":"/uploads/medium_this_shrimp_is_awesome_4167fb0adc.jpg"
},
"small":{
"name":"small_this-shrimp-is-awesome.jpg",
"hash":"small_this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"width":500,
"height":263,
"size":26.69,
"path":null,
"url":"/uploads/small_this_shrimp_is_awesome_4167fb0adc.jpg"
}
},
"hash":"this_shrimp_is_awesome_4167fb0adc",
"ext":".jpg",
"mime":"image/jpeg",
"size":95.48,
"url":"/uploads/this_shrimp_is_awesome_4167fb0adc.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"2021-04-20T17:42:19.639Z",
"updated_at":"2021-04-20T17:42:19.639Z"
}
]
}
]
解决方案
推荐阅读
- c# -
- webserver - Web 服务器可以在主机上存储文件吗？
- npm - npm 重建 node-sass 挂起
- r - 在 R 中加入不精确的字符串
- asp.net - IIS 应用程序在 ElasticBeanstalk AWS 中构建失败
- android - 如何通过 Android 中的 Network 对象建立 SMB 连接？
- node.js - Expressjs 主页显示 404 未找到，但在 localhost 上运行良好
- r - 在 data.table 中使用 lmer predict
- c++ - 使用调试编译时是否可以有不同的文件名？
- sharepoint - SharePoint 2016 搜索未在 SSL 网站上爬网