@Lirrr
Учусь вебу

Почему возникает ошибка в функции передачи индекса картинки в лайтбоксе?

https://codesandbox.io/s/elastic-voice-7nynb?file=...

Пытаюсь внутри слайдера каждой картинке повесить onclick для открытия лайтбокса с картинкой соответствующего со слайдом индекса. Если в моем коде раcкомментировать строку «onClick={openLightboxOnSlide(key)}» то выпадает ошибка: Too many re-renders. React limits the number of renders to prevent an infinite loop

Подскажите, что я делаю не так и как привести код в рабочее состояние?
  • Вопрос задан
  • 37 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Потому что вы не видите разницы между функцией и результатом её вызова.

Добавьте () => перед openLightboxOnSlide(key) (кстати, а какого хрена переменная, содержащая индекс, названа key?).

Но вообще, дополнительный метод не нужен. И объект хранить в lightIndex не надо. Пусть индекс принимает по умолчанию значение null - это будет означать, что показывать ничего не надо:

const [ lightIndex, setLightIndex ] = useState(null);

<img onClick={() => setLightIndex(key)} />

<ReactBnbGallery
  photos={photos}
  show={lightIndex !== null}
  activePhotoIndex={lightIndex}
  onClose={() => setLightIndex(null)}
/>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы