Как отловить ошибку передачи пропса?

Question

[Иван]

На странице есть карточки с фотографиями и названиями. Компонент карточки выглядит так:

import Image from './Image';

function Card({ getCard, card }) {

  function handleClickImage() {
    getCard(card);
  }

  return (
    <li className="element">
      <button type="button" className="element__trash-button" />
      <Image
        onClick={handleClickImage}
        src={card.link}
        alt={card.name}
        className="element__image"
      />
      <div className="element__container">
        <h2 className="element__title"> {card.name} </h2>
        <div className="element__like-group">
          <button type="button" className="element__like" />
          <h3 className="element__like-counter"> {card.likes.length} </h3>
        </div>
      </div>
    </li>
  );
}

export default Card;

При нажатии на картинку открывается попап с увеличенным изображением и подписью снизу. Компонент выглядит так:

import Image from './Image';

function ImagePopup({ card, onClose }) {

  return (
    <section className={`popup ${card && 'popup_opened'}`}>
      <div className="popup__zoom-image">
        <button onClick={onClose} type="button" className="popup__button-close" />
        <Image
          src={card ? card.link : null}
          alt={card ? card.name : null}
          className="popup__image"
        />
        <h2 className="popup__title-zoom-image"> {card ? card.name : null} </h2>
      </div>
    </section>
  );
}

export default ImagePopup;

Здесь я перевожу src и alt в null, пока у нас попап закрыт и карточка не передалась.

А вот так выглядит сам компонент изображения:

import { useState } from 'react';
import filler from '../images/filler.jpg';

function Image({ src, alt, onClick, className }) {

  const [isLoadError, setIsLoadError] = useState(false);

  function handleLoadError() {
    setIsLoadError(true);
  }

  return (
    <img
      onClick={onClick}
      src={isLoadError ? filler : src}
      alt={`Фото: ${alt}`}
      className={className}
      onError={handleLoadError}
    />
  );
}

export default Image;

Суть такая: если в изображении ошибка - стейт переводим в true и показываем заглушку или показываем саму фотографию, если все ок.
При загрузке страницы все битые фото заменяются на заглушку и все хорошо. При нажатии на картинки все открывается, но стоит один раз открыть ошибочное изображение, как после этого вместо любого увеличенного изображения появляется заглушка. При этом в пропс card передается нормальная карточка.

В какую сторону копать, чем это может быть вызвано?

Answer 1

[0xD34F]

чем это может быть вызвано?

Тем, что значение isLoadError меняется только с false на true. Надо его как-то обратно сбрасывать.

Можно следить за значением src, если изменилось, выставлять false:

useEffect(() => setIsLoadError(false), [ src ]);

Другой вариант - в ImagePopup пересоздавать экземпляр компонента Image при изменении данных карточки, указав соответствующий ключ:

<Image key={card ? card.link : 'hello, world!!'}

Comments

[Иван]

Огромное спасибо, первый вариант решил проблему!

Тем, что значение isLoadError меняется только с false на true. Надо его как-то обратно сбрасывать.

я думал насчет этого, но вся суть в том, что я пытался проверять, меняется ли на false или остается в true:
я ставил console.log(isLoadError) при клике на карточку, он менялся... я решил проверить, в чем дело, поставил
useEffect(() => console.log("is unmount"))
и все время при открытии и закрытии попапа с картинкой у меня выводило это в консоль столько раз, сколько карточек у меня на странице. Мне подсказали, что они рендерятся заново.
это все ввело меня в заблуждение и я даже не думал пробовать возвращать в false.

Спасибо большое еще раз!