react-bootstrap Carosuel循环时不显示

Question

我正在循环到一组图像并渲染<Carousel.Item>。但是<Carousel.Item>每当我使用循环时都会显示。每当我没有图像并且渲染图像时都没有像预期的那样工作的循环。这是我写的代码：

        <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

您能否将代码简化为以下内容并进行报告：