从 Strapi CMS 获取数据到 Next(React.js) 前端不起作用

Question

我目前正在使用 Strapi 作为 CMS 并在前端使用 Next.js(React) 的网站。该站点还有一个图像滑块，其中显然包含图像、标题和描述。这三样东西我现在想从我的 Strapi Collection 类型中得到，叫做横幅（Banners）。我已经尝试了很多次并通读了我能找到的每个论坛，但不知何故还是行不通。没有错误，但是网站上没有显示我要显示的数据。以下代码来自 \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;

我目前尝试获取数据的方式来自。我希望有人能够帮助我！非常感谢！

Answer 1

您必须将 API 请求 (getBanners) 放入 useEffect 挂钩中，并将 [] 作为依赖项（运行仅一次 - 加载时），如下所示：

React.useEffect(() => {
 const getBanners = async() => {
   const res = await fetch("http://localhost:1337/banners");
   const json = await res.json();
   setBanners(json);
 }

  getBanners();
}, [])

从 Strapi CMS 获取数据到 Next(React.js) 前端不起作用

Fetch Data from Strapi CMS to Next(React.js) Frontend doesn't work

javascript

content-management-system

reactjs

strapi

next.js