正在从道具更新useState

Question

使用其他组件的props传递的变量更新组件中的变量的好方法是什么？在这里，我试图显示基于从不同组件传递的"id"的图像，在那里我捕获了基于单击事件的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挂钩：来实现

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