react- bootstrap Carosuel не отображается при зацикливании

Question

Я зацикливаюсь на наборе изображений и рендеринг <Carousel.Item>. Однако <Carousel.Item> отображается, когда я использую l oop. Всякий раз, когда у меня нет изображения, я визуализирую изображение без l oop, которое, кажется, работает должным образом. Вот код, который я написал:

        <Container>
            <Row>
              <Col>
                <div className="carousel-wrapper">
                  <Carousel>
                    {step.screenshots.length ? (
                      <>
                        {step.screenshots.map((screenshot: string, index: number) => {
                          return (
                            <Carousel.Item key={index}>
                              <img
                                className="d-block w-100"
                                src={`/api/p/task/results/${screenshot}`}
                                alt="First slide"
                              />
                            </Carousel.Item>
                          )
                        })}
                      </>
                    ) : (
                      <Carousel.Item>
                        <img
                          className="d-block w-100"
                          src={`/api/p/task/results/5eb13cdb6cc3804560b955cc/step2/screenshot0`}
                          alt="First slide"
                        />
                      </Carousel.Item>
                    )}
                  </Carousel>
                </div>
              </Col>
            </Row>
          </Container>

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

Я попытался указать активный индекс, но это тоже не помогло.

Answer 1

Можете ли вы упростить свой код до следующего и сообщить об этом:

<Container>
  <Row>
    <Col>
      <div className="carousel-wrapper">
        <Carousel>
          {step.screenshots.map((screenshot: string, index: number) => {
            <Carousel.Item key={index}>
              <img
                className="d-block w-100"
                src={`/api/p/task/results/${screenshot}`}
                alt={"Slide ${index}"}
              />
            </Carousel.Item>
          })}
        </Carousel>
      </div>
    </Col>
  </Row>
</Container>