这是什么错误？我如何解决与react-lightbox有关的错误？

Question

我一直在努力解决这个错误及其含义，但是却没有任何线索。它指向let image = props.images[state.selectedImageIndex];，并指出它无法读取未定义的属性“ 0”。

我已经遍历并添加了源代工厂中的代码和每个组件。这似乎是问题的顶点。最初，我没有看到Lightbox的行为正常（例如图标和功能无法正常工作）。

错误

Container.render
src/components/LBContainer.js:113

  112 |   let [props, state] = [this.props, this.state];
> 113 |   let image = props.images[state.selectedImageIndex];
  114 |   let leftButton, rightButton;
  115 |   let descriptionText = state.imagesDescriptions[state.selectedImageIndex];
  116 |   let description = props.renderDescriptionFunc.call(this, descriptionText);

闲置时

./node_modules/react-transition-group/esm/Transition.js
Module build failed (from ./node_modules/gatsby/dist/utils/webpack-hmr-hooks-patch.js):
Error: ENOENT: no such file or directory, open '/Users/bradleygradneigo/Desktop/webdev/gatsby_bgg/node_modules/react-transition-group/esm/Transition.js'

代码

import React from 'react';
import {CSSTransitionGroup} from 'react-transition-group'
import PropTypes from 'prop-types';
import ImageContent from './Image';
import Button from './Button';
import { addClass, removeClass, classToggle } from './utils/classNames';
import '../pages/gallery.scss'

const transitionTime = 300;
const transitionDelta = 50;
export default class Container extends React.Component {
  constructor(props) {
    super(props);
    this.handleLeftClick = this.handleLeftClick.bind(this);
    this.handleRightClick = this.handleRightClick.bind(this);
    this.canMoveToLeft = this.canMoveToLeft.bind(this);
    this.canMoveToRight = this.canMoveToRight.bind(this);
    this.toggleControls = this.toggleControls.bind(this);
    this.handleKeyboard = this.handleKeyboard.bind(this);
    this.getDescriptions = this.getDescriptions.bind(this);
    this.state = {
      selectedImageIndex: props.selectedImage,
      direction: 'none',
      imagesDescriptions: {}
    };
  }

  getDescriptions(){
    let images = this.state.imagesDescriptions;
    this.props.images.forEach((image, index) => {
      if(!image.description) return;
      if(image.description.then){ //if promise
        image.description.then((data) => {
          images[index] = data;
          this.setState({imagesDescriptions: images});
        });
        return;
      }
      images[index] = image.description;
      this.setState({imagesDescriptions: images});
    });
  }

  componentDidMount() {
    this.getDescriptions();
    document.addEventListener('keydown', this.handleKeyboard);
    const scrollTop = document.body.scrollTop;
    addClass(document.documentElement, 'lightbox-open');
    document.documentElement.style.top = `-${scrollTop}px`;
    document.body.scroll = "no"; // ie only
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyboard);
    const scrollTop = Math.abs(parseInt(document.documentElement.style.top, 10))
    removeClass(document.documentElement, 'lightbox-open');
    document.documentElement.style.top = null;
    document.body.scrollTop = scrollTop
    document.body.scroll = "yes"; // ie only
  }

  handleKeyboard(ev) {
    const key = ev.keyCode ? ev.keyCode : ev.which;
    if(this.timeLastTransition &&
      ((new Date()) - this.timeLastTransition) < transitionTime + transitionDelta) {
      return;
    }
    this.timeLastTransition = new Date();
    switch(key){
      case 37:
        return this.handleLeftClick();
      case 39:
        return this.handleRightClick();
      case 27:
        return this.props.toggleLightbox();
      default:
        break;
    }
  }

  handleLeftClick(){
    if (this.canMoveToLeft()) {
      this.setState({
        selectedImageIndex: (this.state.selectedImageIndex - 1),
        direction: 'left'
      });
    };
  }

  handleRightClick(){
    if (this.canMoveToRight()) {
      this.setState({
        selectedImageIndex: (this.state.selectedImageIndex + 1),
        direction: 'right'
      });
    };
  }

  canMoveToLeft() {
    return (this.state.selectedImageIndex > 0)
  }

  canMoveToRight() {
    return (this.state.selectedImageIndex < (this.props.images.length - 1))
  }

  toggleControls() {
    classToggle(this.refs.container, 'hide-controls')
  }

  render() {
    let [props, state] = [this.props, this.state];
    let image = props.images[state.selectedImageIndex];
    let leftButton, rightButton;
    let descriptionText = state.imagesDescriptions[state.selectedImageIndex];
    let description = props.renderDescriptionFunc.call(this, descriptionText);
    const transitionName = 'lightbox-transition-image';

    if(this.canMoveToLeft())
      leftButton = (
        <div className='lightbox-btn-left'>
          <Button icon="left-arrow" onClick={this.handleLeftClick} size={ 56 } hasRipple={ true } />
        </div>
      )
    if(this.canMoveToRight())
      rightButton = (
        <div className='lightbox-btn-right'>
          <Button icon="right-arrow" onClick={this.handleRightClick} size={ 56 } hasRipple={ true } />
        </div>
      )
    return (
      <div className='lightbox-backdrop' ref='container'>
        <div className='lightbox-btn-close'>
          <Button icon="back-arrow" onClick={props.toggleLightbox} size={ 34 } hasRipple={ true } />
        </div>
        <div className='lightbox-title-content'>
          <div className='lightbox-title'>
            {image.title}
          </div>
          <div className='lightbox-description'>
            {description}
          </div>
        </div>
        <CSSTransitionGroup transitionAppear={true}
                            transitionAppearTimeout={transitionTime}
                            transitionEnterTimeout={transitionTime}
                            transitionLeaveTimeout={transitionTime}
                            transitionName={ {
                              enter: `${transitionName}-enter-${state.direction}`,
                              enterActive: `${transitionName}-enter-${state.direction}-active`,
                              leave: `${transitionName}-leave-${state.direction}`,
                              leaveActive: `${transitionName}-leave-${state.direction}-active`,
                              appear: `${transitionName}-appear`,
                              appearActive: `${transitionName}-appear-active`
                            } }>
          <ImageContent key={image.src}
                        src={image.src}
                        showImageModifiers={props.showImageModifiers}
                        toggleControls={this.toggleControls} />
        </CSSTransitionGroup>
        {leftButton}
        {rightButton}
      </div>
    )
  }
}

Container.defaultProps = {
  selectedImage: 0,
  renderDescriptionFunc: (descriptionText) => {
    return (
      <div>
        {String(descriptionText)}
      </div>
    )
  }
}

Container.propTypes = {
  selectedImage: PropTypes.number,
  images: PropTypes.array.isRequired,
  toggleLightbox: PropTypes.func.isRequired,
  showImageModifiers: PropTypes.bool,
  renderDescriptionFunc: PropTypes.func
}

我只是想让Lightbox正常工作，但此错误会与其他错误一起弹出。如果您知道是什么原因，可以解释一下吗？如果需要更多代码，请指定，谢谢！