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>
  );
};

使用其他组件传递的props更新变量是一种好方法吗？还是有其他想法可以做到这一点？

Answer 1

您需要一个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 (...);
};

从道具更新useState

1 个答案: