0

基本上，我有一个嵌套组件，我想用父组件渲染它，并且在服务器启动时它工作正常。

但是当我从另一个页面切换回来时，问题就出现了。一些嵌套组件消失了。如果我进行了刷新，那么一切正常。

我该如何解决这个问题？

正常： Image-1

组件消失： Image-2

索引.js：

import BannerBaseLine from "./../components/HOME/Banner/BannerBaseLine";
import SubSection1 from "./../components/ABOUT/subSection1";
import CoursesList from "../components/HOME/MOSTTRENDING/CoursesList/courseslist";
import ShortOverview from "./../components/HOME/CourseOverviewSection/Section1/shortoverview";
import Testimonial from "./../components/HOME/Testimonial/testimonial";
import ClientItem from "./../components/HOME/Client-area/all-client-item";

export default function HomeMain({categories}) {
  return (
    <>
      <br></br>
      <br></br>
      <br></br>
      <BannerBaseLine categories = {categories} />
      <CoursesList />
      {/* <SubSection1 /> */}
      <ShortOverview />
      <CoursesList />
      <Testimonial />
      <ClientItem />
    </>
  );
}

export async function getStaticProps(){
  const response = await fetch('http://localhost:8000/api/data/categories')
  const data = await response.json()

  console.log(data)
  return {
    props:{
      categories : data, 
    }
  }
}

BannerBaseLine 组件：

import BannerBlock from './BannerBlock';
    export default function BannerBaseLine({ categories }) {
      return (
        <>
          <section
            className="banner-area"
            style={{ backgroundImage: "url(assets/img/banner/0.jpg)" }}
          >
            <div className="container">
              <div className="row">
                <div className="col-lg-6 col-md-8 align-self-center">
                  <div className="banner-inner text-md-start text-center">
                    <h1>
                      Find the Best <span>Courses</span> & Upgrade{" "}
                      <span>Your Skills.</span>
                    </h1>
                    <div className="banner-content">
                      <p>
                        Edufie offers professional training classes and special
                        features to help you improve your skills.
                      </p>
                    </div>
                    <div className="single-input-wrap">
                      <input type="text" placeholder="Search your best courses" />
                      <button>
                        <i className="fa fa-search"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <br></br>
          <br></br>
          <div className="container">
            <div className="intro-area-2">
              <div className="row justify-content-center">
                <div className="col-lg-12">
                  <div className="intro-slider owl-carousel">
                    {categories.map((category) => {
                      return (
                        <>
                          <BannerBlock category={category} key={category.id} />
                        </>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    }

BannerBlock 组件：

    export default function BannerBlock({category}) {
  console.log(category);
  return (
    <div className="item">
      <div className="single-intro-wrap">
        <div className="thumb">
          <img src={category.image} alt="img" />
        </div>
        <div className="wrap-details">
          <h6>
            <a href="#">{category.Base_Category_Title}</a>
          </h6>
          <p>236 Course Available</p>
        </div>
      </div>
    </div>
  );
}
4

2 回答 2

0

来自https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

注意：您不应该使用 fetch() 来调用 getStaticProps 中的 API 路由。相反，直接导入 API 路由中使用的逻辑。您可能需要针对这种方法稍微重构您的代码。

从外部 API 获取很好！

于 2021-09-04T17:02:22.770 回答
0

你应该检查类别是否存在

export default function HomeMain({categories}) {
if(categories){
return <Loading Component />
}

rest of the code...

}
于 2021-09-05T00:27:28.080 回答