React Bootstrap轮播问题

Question

我已经在我的项目中包括了react bootstrap并从那里开始使用轮播。但是目前我遇到以下错误（如屏幕截图所示），并且没有滑动到下一张图像。从第二次单击其滑动到下一张图像，并显示错误。该错误显示在以下屏幕截图中：

我有以下代码。你们有没有遇到过同样的问题？有帮助吗？

import React, { Component } from 'react';
import { Carousel } from 'react-bootstrap';

class GetCarousel extends Component {

    constructor(props, context) {
        super(props, context);

        this.handleSelect = this.handleSelect.bind(this);

        this.state = {
          index: 0,
          direction: null
        };
    }

    handleSelect(selectedIndex, e) {
        // alert(`selected=${selectedIndex}, direction=${e.direction}`);
        console.log(selectedIndex);
        console.log(e.direction);
        this.setState({
          index: selectedIndex,
          direction: e.direction
        });
    }

    render() {
        // const { index, direction } = this.state;
        return(
            <div>
                <Carousel
                    activeIndex={this.state.index}
                    direction={this.state.direction}
                    onSelect={this.handleSelect}
                >
                    <Carousel.Item>
                      <img width={900} height={500} alt="900x500" src="https://www.pixelstalk.net/wp-content/uploads/2016/06/Girl-sunglasses-make-up-fashion-wallpaper-1920x1200.jpg" />
                      <Carousel.Caption>
                        <h3>First slide label</h3>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                      </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                      <img width={900} height={500} alt="900x500" src="https://wallpaper-house.com/data/out/7/wallpaper2you_196572.jpg" />
                      <Carousel.Caption>
                        <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                      </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                      <img width={900} height={500} alt="900x500" src="http://wfiles.brothersoft.com/h/hilary_duff_34461-1920x1200.jpg" />
                      <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
                        </p>
                      </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>
            </div>
        );
    }
}

export default GetCarousel;