从道具更新useState

Question

使用props从其他组件传递的变量来更新组件中的变量的良好做法是什么？在这里，我试图显示基于从不同组件传递的“ id”的图像，在该组件中我捕获了基于onClick事件的id。不幸的是，我的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>
  );
};

这是一种很好的方法来更新变量，例如使用从其他组件传递来的道具吗？还是有其他想法可以做到这一点？

Answer 1

[您需要一个监听器来更改curr_idx，否则您的状态不会因道具更改而更新（由onClick引起，您可以通过useEffect hook来实现：]]

useEffect