除非两次单击，否则滑动器滑块不会显示-React Swiper

Question

我正在尝试打开引导程序模版中的滑动滑块。但是只有在我两次打开模态或调整窗口大小时，swiper才会渲染。

Bellow是Portfolio方法的代码。单击图像时，将显示模态。

const Portfolio = (props) => 
    <div className="col-sm-4">
        <div className="mb-2">
            /* this image click will trigger modal to open */
            <img 
                onClick={props.gallery}         
                className="card-img-top" 
                src={"/assets/imgs/project/"+props.portfolio.img_thumb} 
                alt="" />
      </div>
    </div>

，但模态内的滑动滑块仅在打开模态2次时显示 下面是swiper和modal的代码

class Project extends React.Component
{

        updateGallery(val) {
                this.setState({
              gallery: val
            });
                this.toggle();
        }

        render(){

            /* this Modal display but the Swiper doesnt render unless close the modal and click the image again */
          <div>
              <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                  <ModalHeader>
                    {(currentTodos[galId] !== undefined) ? currentTodos[galId].title : ''}
                  </ModalHeader>

                  <ModalBody>
                      <Swiper {...params} shouldSwiperUpdate>
                          {
                                        (currentTodos[this.state.gallery] !== undefined) ? 
                                        currentTodos[this.state.gallery].gallery.map((gallery, i) => 
                                            <img key={i} className="card-img-top" src={"/assets/imgs/project/"+gallery} alt="" />
                                        ) : ''
                                    }
                      </Swiper>
                  </ModalBody>
                  <ModalFooter>
                      <Button color="primary" onClick={this.toggle}>Do Something</Button>
                      <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                  </ModalFooter>
              </Modal>
            </div>

            /* this one running the loop and showing the item from the portfolio */
            {currentTodos.map((item, i) => 
                <Portfolio 
                    key={i} 
                    gallery={() => this.updateGallery(i)}
                    portfolio={item} />
            )}

        }
}

我正在考虑发生这种情况，因为滑动器需要重新渲染，因为如果我调整窗口大小，它会再次出现。

我正在https://github.com/kidjp85/react-id-swiper上使用React-id-swiper