javascript - React/next.js - 为什么组件不能由我定义的序列生成？

Question

我有一个布局：

import React from 'react'
import Header from '../components/layout/common/Header'
import Footer from '../components/layout/common/Footer'
import GoToTop from '../components/layout/common/GoToTop'
import { withTranslation } from '../i18n'

const Layout = (props) => {
  return (
    <main>
      <Header />
      {props.children}
      <Footer />
      <GoToTop />
    </main>
  )
}

export default withTranslation('common')(Layout)

我用它Layout来构建一个这样的about页面about.js：

import React from 'react'
import Layout from '../../layout/Layout'
import GeneratorSeo from '../../components/GeneratorSeo'
import PromoBanner from '../../components/layout/common/PromoBanner'
import promos from '../../constants/promo-banner'
import Breadcrumbs from '../../components/layout/common/Breadcrumbs'
import HomeClient from '../../components/layout/home/HomeClient'
import AboutContent from '../../components/layout/about/AboutContent'

const About = () => {
  const pageTitle = 'About';
  const aboutPromo = promos.filter((item, index) => {
    return item.subtitle === pageTitle.toLowerCase()
  })[0];
  return (
    <Layout>
      <GeneratorSeo title={pageTitle} />
      <PromoBanner {...aboutPromo} />
      <Breadcrumbs {...aboutPromo} />
      <AboutContent />
      <HomeClient />
    </Layout>
  )
}

export default About

但是我的about页面不是按照我在about.js.

它是这样生成的：Header --> GeneratorSeo & PromoBanner & Breadcrumbs --> HomeClient --> Footer --> GoToTop --> AboutContent

当我about再次刷新页面时，顺序是正确的。

我有AboutContent.js：

import React, { Fragment, createRef } from 'react'
import ReactComment from '../../ReactComment'
import aboutContents from '../../../constants/about'

import { withTranslation } from '../../../i18n'
import Slider from 'react-slick'

const settingSlider = {
  className: 'js-carousel u-carousel-v12',
  autoplay: true,
  dot: false,
  infinite: true,
  arrows: false,
  autoplaySpeed: 5000
}

const renderArrows = slider => {
  return (
    <div className="slider-arrow">
      <div className="js-prev u-arrow-v1 g-width-20 g-height-20 g-pos-abs g-bottom-minus-30 g-left-0 
        g-color-main g-color-primary--hover fa fa-angle-left slick-arrow"
        onClick={() => slider.current.slickPrev()} />
      <div className="js-next u-arrow-v1 g-width-20 g-height-20 g-pos-abs g-bottom-minus-30 g-left-0 
        g-color-main g-color-primary--hover fa fa-angle-right g-ml-30 slick-arrow"
        onClick={() => slider.current.slickNext()} />
    </div>
  );
};

const AboutContent = props => {

  const contentLength = aboutContents.length;
  const refSlide1 = createRef();
  const refSlide2 = createRef();
  const refSlide3 = createRef();

  return (
    <Fragment>
      <ReactComment text={'AboutContent'} />
      <div className="container">
        {
          aboutContents.map((content, index) => {

            let refSlide = refSlide1;
            if (index === 0) {
              refSlide = refSlide1;
            } else if (index === 1) {
              refSlide = refSlide2;
            } else {
              refSlide = refSlide3;
            }

            return (
              <span key={index}>
                <div className="row g-pt-100 g-pb-30--lg">
                  <div className={"col-lg-6 g-mb-100 " + (index % 2 != 0 && "order-lg-2")}>
                    <div className="g-pos-rel">

                      <div style={{ position: "relative" }}>
                        {renderArrows(refSlide)}
                        <Slider
                          {...settingSlider}
                          ref={refSlide}
                        >
                          {
                            content.sliderImgs.map((img, i) => {
                              return (
                                <div className="js-slide">
                                  <img className="img-fluid" src={img} alt="Image Description" />
                                </div>
                              )
                            })
                          }
                        </Slider>
                      </div>

                      <div className="g-pos-abs g-bottom-minus-30 g-right-0 g-right-minus-20--sm">
                        <a className="js-fancybox d-flex g-text-underline--none--hover" href="javascript:;"
                          data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                          data-speed="350"
                          data-caption="Video Popup">
                          <span className="g-color-main g-font-weight-500 g-font-size-13 mt-auto mr-4">{props.t(content.sliderTitle)}</span>
                          <span className="u-icon-v3 u-icon-size--lg g-color-white g-bg-primary g-bg-main--hover rounded g-pos-rel g-z-index-1 g-cursor-pointer">
                            <i className="g-font-size-17 g-pos-rel g-left-2 fa fa-play"></i>
                          </span>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div className={"col-lg-6 g-mb-100 " + (index % 2 != 0 && "order-lg-1")}>
                    <div className="g-pl-40--lg">
                      <div className="mb-5">
                        <h3 className="mb-4">{props.t(content.title)}</h3>
                        <p className="g-line-height-2">{props.t(content.content)}</p>
                      </div>
                    </div>
                  </div>
                </div>
                {index != contentLength - 1 && (<hr className="g-brd-gray-light-v4 my-0" />)}
              </span>
            )
          })
        }
      </div>

      <ReactComment text={'End AboutContent'} />
    </Fragment >
  )
}

export default withTranslation('about')(AboutContent)

我猜它AboutContent.js有插件https://react-slick.neostack.com/和一个map这样可以比其他组件生成得慢？我不知道为什么，我还没有找到解决方案。请帮我！

标签： javascriptreactjsnext.js