Ошибка типа: не удается прочитать свойство 'active' неопределенного с помощью react-images

#javascript #reactjs #undefined #typeerror #image-gallery

#javascript #reactjs #не определено #ошибка типа #изображение-галерея

Вопрос:

Привет, я хотел реализовать эту фотогалерею из react-photo-gallery (https://www.npmjs.com/package/react-photo-gallery )

Я установил 2 зависимости: react-photo-gallery и react-images

Я хотел протестировать следующую ссылку:https://codesandbox.io/s/awesome-bassi-5vn3lvz2n4?from-embed=amp;file=/index.js:666-689 , но я столкнулся с a TypeError: Cannot read property 'active' of undefined при нажатии на одно из изображений в моем проекте. (https://ibb.co/9gdT9LD )

Я пытался использовать тот же точный код, и я действительно не понимаю, почему существует ошибка типа.

Есть ли кто-нибудь, кто может мне помочь, почему возникла ошибка, и исправить эту ошибку?

Вот мой код, который я использовал для реализации (тот же код, что и в примере, но другим способом)

 import React, { useState, useCallback } from 'react';
import Gallery from 'react-photo-gallery';
import Carousel, { Modal, ModalGateway } from 'react-images';



const photos = [
  {
    src: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599',
    width: 4,
    height: 3,
  },
  {
    src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799',
    width: 1,
    height: 1,
  },
  {
    src: 'https://source.unsplash.com/qDkso9nvCg0/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/iecJiKe_RNg/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/epcsn8Ed8kY/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/NQSWvyVRIJk/800x599',
    width: 4,
    height: 3,
  },
  {
    src: 'https://source.unsplash.com/zh7GEuORbUw/600x799',
    width: 3,
    height: 4,
  },
  {
    src: 'https://source.unsplash.com/PpOHJezOalU/800x599',
    width: 4,
    height: 3,
  },
  {
    src: 'https://source.unsplash.com/I1ASdgphUH4/800x599',
    width: 4,
    height: 3,
  },
];


const ImageGrid = (props) => {
  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);

  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };

  return (
    <div>
      <Gallery photos={photos} onClick={openLightbox} />
      <ModalGateway>
        {viewerIsOpen ? (
          <Modal onClose={closeLightbox}>
            <Carousel
              currentIndex={currentImage}
              views={(x) => ({
                ...x,
                srcset: x.srcSet,
                caption: x.title,
              })}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  );
}

export default ImageGrid;

Развернуть фрагмент

1. единственными различиями между вашим примером и примером react-photo-gallery являются версии react и react-photo-gallery. Возможно, попробуйте изменить пакет версии react-photo-gallery.

2. Я использовал версию «react-images»: «1.0.0» и «react-photo-gallery»: «^ 8.0.0»,

3. Также есть пустая страница

Ответ №1:

Я также столкнулся с этой проблемой, и изменение версии «react-images» на «1.0.0» исправило ее для меня.

Просто запустите в терминале

 npm install react-images@1.0.0

Убедитесь, что ваш сервер react dev не запущен при установке, иначе npm завершится с ошибкой.

Ответ №2:

Мне пришлось понизить версию React до 16.8.6, чтобы заставить ее работать.