Следующий компонент js не отображается без перезагрузки

По сути, у меня есть вложенный компонент, который я хочу отобразить вместе с родительским компонентом, и он отлично работает при запуске сервера.

Но проблема возникает, когда я переключаюсь с другой страницы. Некоторые из вложенных компонентов исчезнут. Если я обновился, то снова все в порядке.

Как я могу решить эту проблему?

Нормальный: Изображение-1

Компонент исчез: Изображение-2

Index.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>
  );
}
Источник

2 ответа

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

Примечание. Не следует использовать fetch() для вызова маршрута API в getStaticProps. Вместо этого напрямую импортируйте логику, используемую в вашем маршруте API. Для этого подхода вам может потребоваться небольшой рефакторинг вашего кода.

Получение из внешнего API - это нормально!

Источник

вы должны проверить, существуют ли категории

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

rest of the code...

}
Источник
Другие вопросы по тегам