也许我想得太复杂了，但我就是不能让它工作。
我将从API中获取的盒子Map到我的Box组件：
{boxes.max((box) => (
<div className="box" key={box.id}>
<BoxCard
box={box}
image={box.image ? box.image.id : undefined}
/>
</div>
))}在我的BoxCard中，我正在获取图像：
const [imageData, setImageData] = useState<string>();
if (imageId) {
useFetchItem<typeof Image>("/image/", imageId, {
onSuccess: (data) => {
setImageData(data);
},
});
}然后用src={imageData}插入。
对于第一个有图像的盒子，一切正常，但在那之后，所有有图像的盒子都被分配了来自第一个有图像的盒子的图像。
有没有办法在任何Map迭代中重置useState的状态？或者其他方法？
1条答案
按热度按时间fykwrbwg1#
我认为添加一个key就可以解决这个问题。当React重新渲染组件列表时，它使用key prop来确定一个组件是否需要更新，或者是否可以从以前的渲染中重用它。如果你没有指定一个唯一的key，React可能会认为两个组件是相同的，并重用以前组件的状态。