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

Question

我目前正在开发一个使用 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;

我目前尝试获取数据的类型来自this StackOverflow answer。 我希望有人能帮助我！非常感谢！

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();
}, [])