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

Question

[Кирилл]

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

Подскажите, что я делаю не так и как привести код в рабочее состояние?

Answer 1

[0xD34F]

Потому что вы не видите разницы между функцией и результатом её вызова.

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

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

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

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

<ReactBnbGallery
  photos={photos}
  show={lightIndex !== null}
  activePhotoIndex={lightIndex}
  onClose={() => setLightIndex(null)}
/>

Comments

[Кирилл]

Здравстуйте, спасибо за помощь.

Потому что вы не видите разницы между функцией и результатом её вызова.

Точно, этот момент понял. Исправил, следуя вашему примеру, но все-равно не работает - показывает пустой лайтбокс. Что я еще упускаю?
https://codesandbox.io/s/elastic-voice-7nynb?file=...

[0xD34F]

Кирилл, круто конечно, что вы обратили внимание на замечание относительно имени переменной, но сильно лучше не стало. Какого хрена переменная, содержащая индекс, названа id?

Исправил, следуя вашему примеру, но все-равно не работает - показывает пустой лайтбокс.

Враньё. Моему примеру вы следовали не до конца. Лайтбокс не пустой - есть надпись, вы прочтите, там сказано, чего не хватает.

[Кирилл]

0xD34F, косяк нашел, благодарю. Переменную тоже поправил.