javascript - 从 Strapi CMS 获取数据到 Next(React.js) 前端不起作用
问题描述
我目前正在一个网站上使用 Strapi 作为 CMS 和 Next.js(React) 在前端。该网站还有一个图像滑块,其中显然包含图像、标题和描述。这三样东西我现在想从我的名为 Banner (Banners) 的 Strapi Collection Type 中得到。我已经尝试了很多次并阅读了我能找到的每个论坛,但它仍然无法正常工作。没有错误,但我要显示的数据没有显示在网站上。以下代码来自 \frontend\components\image-slider.js:
import React from "react";
const Slider = ({}) => {
const [banners, setBanners] = React.useState(null);
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners");
const json = await res.json();
setBanners(json);
}
if(!banners){
getBanners();
}
if (typeof window !== 'undefined') {
// Code for making slider work
}
return (
<div className="img-slider">
<div className="slide active">
<div className="info">
<div>
{banners ? banners.map((banner) => (
<div key={banner.id}>
<h2>{banner.title}</h2>
</div>
)) : (
<div>Loading...</div>
)}
</div>
<p>
{banners ? banners.map((banner) => (
<div key={banner.id}>
<h2>{banner.description}</h2>
</div>
)) : (
<div>Loading...</div>
)}
</p>
{/* <Image></Image>This I haven't tried yet. */}
</div>
</div>
<div className="slide">
{/* Same code as div before */}
</div>
{/* further 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;
我目前尝试获取数据的类型来自这个 StackOverflow 答案。我希望有人能帮助我!非常感谢!
解决方案
您必须将您的 API 请求(getBanners)放在 useEffect 挂钩中,并将 [] 作为依赖项(仅运行一次 - 加载时),如下所示:
React.useEffect(() => {
const getBanners = async() => {
const res = await fetch("http://localhost:1337/banners");
const json = await res.json();
setBanners(json);
}
getBanners();
}, [])
推荐阅读
- office365 - 是否可以获得租户中所有团队的列表?
- php - Fpdf在新数据后创建新行
- javascript - 反应路由器链接 ForceUpdate
- reactjs - 使用来自 redux-saga 的 InteractionManager
- hibernate - 对于 Spring Boor 2.0+,SQL 服务 2012 的“spring.jpa.properties.hibernate.dialect”的值是多少?
- sql - 从字符串特定日期格式转换日期和/或时间时转换失败
- matlab - 从 4x6 矩阵创建邻接矩阵
- java - 单一接口下不可更改的类
- python - python图找到替代最快的路线
- scapy - 如何在 ip 长度 > 20 和 ip 选项 0 的情况下使用 scapy