Значение индекса отслеживания проблем для реагирующих изображений с использованием React, Gatsby и GraphQL - PullRequest
Новая
       7

Значение индекса отслеживания проблем для реагирующих изображений с использованием React, Gatsby и GraphQL

0 голосов
/ 16 апреля 2020

Описание:

В настоящее время пытаюсь интегрировать реагирующие изображения в проект, используя React и Gatsby. Сделано много поворотов с различными возможными исправлениями, и я не могу найти проблему. Похоже, что проблема заключается либо в отображении изображений, либо в правильном отслеживании значения currentIndex.

ContainerLightBox: 

import React from 'react'
import { StaticQuery, graphql } from "gatsby"
import LightBox from './LightBox'

const ContainerLightBox = () => (
  <StaticQuery
    query={graphql`
      query {
          images: allFile( 
            filter: { sourceInstanceName: { eq: "gallery" } } 
            sort: { fields: name, order: ASC }
          ) {
            edges {
                node {
                    childImageSharp {
                        fluid(maxWidth: 1000) {
                          ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
      }
  `}
    render={data => <LightBox images={data.images.edges} />}
  />
)

export default ContainerLightBox

LightBox: 

import React, { Component, Fragment } from 'react'
import Img from 'gatsby-image'
import Lightbox from 'react-images'

export default class LightBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      lightboxIsOpen: false,
      currentImage: 0
    }
  }

  toggleLightbox = ( i, e ) => {
    e.preventDefault()
    this.setState(
      {
        lightboxIsOpen: !this.state.lightboxIsOpen,
      },
      () => {
        this.state.active
          ? this.setState({
              currentImage: i,
            })
          : this.setState({
              currentImage: 0,
            })
      }
    )
  }

  gotoPrevious = () => {
    this.setState({
      currentImage: this.state.currentImage - 1
    })
  }

  gotoNext = () => {
    this.setState({
      currentImage: this.state.currentImage + 1
    })
  }

  handleClickImage = () => {
    if (this.state.currentImage === this.props.images.length - 1) {
      return this.gotoNext()
    }
  }

  render() {
    const { images } = this.props

    return (
      <Fragment>
        {images.map(( photo, i ) => {
          return (
            <a
              key={i}
              href={photo.node.childImageSharp.fluid.src}
              onClick={e => this.toggleLightbox( i, e )}
              className="photo-container"
            >
              <Img
                fluid={photo.node.childImageSharp.fluid}
                style={{ width: '100%', height: '100%' }}
              />
            </a>
          )
        })}
        <Lightbox
          images={images.map( photo => ({
            src: photo.node.childImageSharp.fluid.src,
            srcSet: photo.node.childImageSharp.fluid.srcSet
          }))}
          currentImage={this.state.currentImage}
          isOpen={this.state.lightboxIsOpen}
          onClickPrev={this.gotoPrevious}
          onClickNext={this.gotoNext}
          onClickImage={this.handleClickImage}
          onClose={this.toggleLightbox}
          showImageCount={false}
          backdropClosesModal={true}
        />
      </Fragment>
    )
  }
}

Ошибка: 

TypeError: Cannot read property '0' of undefined

Carousel.getViewData

1574 |   var currentIndex = _this2.state.currentIndex;
1575 | 
1576 | 
1577 |   return views[currentIndex];
1578 | };
1579 | 
1580 | this.focusViewFrame = function () {
...