你好，我有一点问题react-image-gallery。

在ImageGallery组件我通过了startIndex值喜欢this.state.currentImage和this.state.currentImage依赖于数量的照片与我们要点击。例如，当我们点击照片时，数字 4this.state.currentImage链接在数字 4 上，这对我来说是正确的，但在<imageGallery/>组件 startIndex 中，它不像我应该的那样工作。我的模态总是从第一个图像索引 [0] 开始。

import React, { Component } from "react";
import { Modal, ModalClose, ModalBody } from "react-modal-bootstrap";
import ImageGallery from "react-image-gallery";
import "./index.css";

export default class Images extends Component {
constructor(props) {
    super(props);

    var data = { title: "photos", images: [], ...props.data };
    this.state = {
        open: false,
        showPlayButton: true,
        showGalleryPlayButton: false,
        showFullscreenButton: true,
        showGalleryFullscreenButton: false,
        currentImage: 0,
        test: 0,
        player: [],
        data: data
    };
    console.log("Images: ", this.state.data);
    this.openLightbox = this.openLightbox.bind(this);
    this._renderImages = this._renderImages.bind(this);
    this._onSlide = this._onSlide.bind(this);
    this._onReady = this._onReady.bind(this);
}

state = {
    isOpen: false
};

openModal = event => {
    console.log(event.target);
    this.setState({ isOpen: true });
};

openLightbox(index, event) {
    // console.log('index',index);
    event.preventDefault();
    // this.setState({
    //  isOpen: true,
    //  currentImage: index
    // });
    this.setState(
        prevState => {
            return {
                currentImage: index,
                isOpen: true
            };
        },
        () => {
            console.log("currentImage", this.state.currentImage);
            console.log("event", index);
        }
    );
}

hideModal = () => {
    this.setState({ isOpen: false });
};

_renderImages(item) {
    return (
        <div className="images image-gallery-image">
            <div className="images image-wrapper">
                <h1>{this.state.currentImage}</h1>
                <img src={item.img} alt="" className="images multimedia_image" />
                <span className="images image-gallery-description">{item.desc}</span>
            </div>
        </div>
    );
}

_onReady(event) {
    const player = this.state.player;
    player.push(event.target);
    this.setState({
        player: player
    });
}

_onSlide() {
    this.state.data.images.forEach(player => {});
}

handleImageLoad(event) {
    console.log("Image loaded ", event.target);
}

render() {
    var openLightbox = this.openLightbox;
    var currentImage = this.state.currentImage;
    const number = this.state.currentImage;

    return (
        <div className="images row">
            <div className="images col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div className="images title">{this.state.data.title}</div>
            </div>
            <div className="images col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div className="images row">
                    {this.state.data.images.map((object, i) => {
                        let backgroundImage = {
                            backgroundImage: "url(" + object.thumbnail + ")",
                            top: 0,
                            right: 0,
                            left: 0,
                            bottom: 0,
                            position: "absolute",
                            flex: 1,
                            backgroundPosition: "center",
                            backgroundSize: "cover",
                            zIndex: 1
                        };
                        return (
                            <div
                                className="images item col-xs-4 col-sm-4 col-md-3 col-lg-3 images__single-item"
                                key={i}
                            >
                                <div
                                    className="images multimedia_button"
                                    onClick={e => this.openLightbox(i, e)}
                                >
                                    <div style={backgroundImage} />
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
            <Modal isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
                <button
                    type="button"
                    className="images player_button_close"
                    onClick={this.hideModal}
                >
                    X
                </button>
                <ModalBody>
                    <ImageGallery
                        items={this.state.data.images}
                        startIndex={this.state.currentImage}
                        slideInterval={2000}
                        showPlayButton={false}
                        showFullscreenButton={false}
                        onImageLoad={this.handleImageLoad}
                        onSlide={this._onSlide}
                        showIndex={true}
                        renderItem={this._renderImages}
                    />
                </ModalBody>
            </Modal>
        </div>
    );
}

}