Next js неправильно отображает страницу при обновлении - PullRequest
Новая
       10

Next js неправильно отображает страницу при обновлении

0 голосов
/ 30 апреля 2020

У меня проблема с отображением моего следующего приложения js. На самом деле, я пытаюсь сделать отзывчивую страницу, которая не имеет такой же визуализации, если пользователь просматривает ее на мобильном телефоне. Когда я тестировал его на Chrome, он работал довольно хорошо: когда я начинаю с большого экрана, а затем я уменьшаю окно, все работает как положено. Однако, когда мое окно было маленьким, и я обновил его, рендер изменился и выглядит очень похоже, что элементы смешаны.

Чтобы показать вам мой код, У меня есть массив со всеми контейнерами, которые я хочу отобразить: 

const AllContainers = [
    <Container title="Immatriculation" onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
    <Container title="Permis" key={1} onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
    <Container title="Conformité" onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
    <Container title="Assurance" onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
  ]

, и я хочу отобразить их в слайд-шоу: 

            <SlideShowDiv>
              <Row className="align-items-center justify-content-center">
                <Col xs="auto">
                  <a
                    className="prev"
                    onClick={() => {
                      plusSlides(-1)
                    }}
                  >
                    <Previous />
                  </a>
                </Col>
                {AllContainers.map((Container, index) => {
                  return (
                    <Col
                      xs={isVerySmallScreen ? "8" : "auto"}
                      className={shownSlide === index + 1 ? "shownSlide fade" : " hiddenSlide"}
                      key={index}
                    >
                      {Container}
                    </Col>
                  )
                })}
                <Col xs="auto">
                  <a
                    className="next"
                    onClick={() => {
                      plusSlides(1)
                    }}
                  >
                    <Next />
                  </a>
                </Col>
              </Row>
            </SlideShowDiv>

перед обновлением я получаю этот рендер

и после, я получаю этот

Как вы можете видеть, кажется, что элементы смешаны, моя предыдущая стрелка находится в элементе контейнера после refre sh, хотя это не в моем коде. Более того, похоже, что мое свойство css, связанное с className = "hiddenSlide", больше не получено браузером, потому что я все еще могу видеть контейнеры с этим className.

Знаете ли вы, ребята, как я могу это исправить вопрос? Заранее спасибо!

...