Обновление useState из реквизита - PullRequest
Новая
       8

Обновление useState из реквизита

0 голосов
/ 28 октября 2019

Какова хорошая практика для обновления переменной в компоненте, используя переменную, передаваемую реквизитами из других компонентов? Здесь я пытаюсь отобразить изображение на основе идентификатора, переданного из другого компонента, где я получаю идентификатор, основанный на событии click. К сожалению, мой useState компонент не обновляется на 100%. Каким-то образом можно правильно прочитать правильный индекс, но он не отображает изображение должным образом. 

const SwiperModal = ({ handleClose, show, membersList, curr_idx }) => {
  const showHideClassName = show ? 'modal display-block' : 'modal display-none';
  const idx = parseInt(curr_idx);
  const [index, setIndex] = useState(idx);

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        <button className="btn__close" onClick={handleClose}>
          close
        </button>
        <Gallery
          index={index}
          //index variable above is responsible for "which image is displayed from the list"
          onRequestChange={i => {
            setIndex(i);
          }}
        >
          {membersList.map((value, index) => (
            <GalleryImage objectFit="contain" src={value.image} key={index} />
          ))}
        </Gallery>
      </section>
    </div>
  );
};

Является ли это хорошим подходом для обновления таких переменных с помощью реквизита, переданного из других компонентов? или есть другая идея сделать это?

1 Ответ

0 голосов
/ 28 октября 2019

Вам нужен слушатель для изменения curr_idx, иначе ваше состояние не будет обновляться при изменении реквизита (вызванного onClick), вы можете добиться этого с помощью useEffect hook : 

const SwiperModal = ({ handleClose, show, membersList, curr_idx }) => {
  const [index, setIndex] = useState(parseInt(curr_idx));

  useEffect(() => {
    setIndex(parseInt(curr_idx));
  }, [curr_idx]);

  return (...);
};
...