React模态更新项错误

Question

在更新过程中，每次都会更新相同id值的信息，这可能是什么问题？例如，它在每次更新操作中都会更新id编号为3的字段。我在更新过程的循环中使用索引值

在此处输入图像描述

在此处输入图像描述

{cardItemData.map((cardItem, index) => (
<>
<tr id={index}>
<td>{cardItem.min}</td>
<td>{cardItem.price}</td>
</tr>
<Modal
titleId
isOpen={modalState}
setIsOpen
isStaticBackdrop
isScrollable
isCentered
size
isAnimation>
<ModalHeader
className
setIsOpen={() =>
setModalState(false)
}>
<ModalTitle id>
Update
</ModalTitle>
</ModalHeader>
<ModalBody>
<div className='row'>
<div className='col-lg-4'>
<FormGroup
id='cardMinUp'
label={t(
'form.cardMin',
)}
isFloating>
<Input
type='number'
placeholder={t(
'form.cardMin',
)}
isValid={
formik.isValid
}
value={
formik
.values
.cardMinUp
}
onChange={
formik.handleChange
}
isTouched={
formik
.touched
.cardMinUp
}
invalidFeedback={
formik
.errors
.cardMinUp
}
/>
</FormGroup>
</div>
<div className='col-lg-4'>
<FormGroup
id='cardPriceUp'
label={t(
'form.cardPrice',
)}
isFloating>
<Input
type='number'
placeholder={t(
'form.cardPrice',
)}
isValid={
formik.isValid
}
value={
formik
.values
.cardPriceUp
}
onChange={
formik.handleChange
}
isTouched={
formik
.touched
.cardPriceUp
}
invalidFeedback={
formik
.errors
.cardPriceUp
}
/>
</FormGroup>
</div>
<div className='col-lg-4 mt-2'>
<Button
onClick={() => {
dispatch(
agencySlice.editUpdateCardItem(
{
id: index,
min: formik
.values
.cardMinUp,
price: formik
.values
.cardPriceUp,
},
),
);
setModalState(
false,
);
}}
className='me-3'
icon='plus'
isOutline
color='info'>
Save
</Button>
</div>
</div>
</ModalBody>
</Modal>
</>
))}

Answer 1

我想我已经猜到了问题&这是一个基本的JavaScript问题
您正在使用index查看单击按钮的卡片"；id"；。

您应该使用event.currentTarget来访问单击的按钮，因为索引对于事件处理程序来说是不可靠的。

<Button data-index={index}>
onClick={handleButtonClick}
className='me-3'
>
Save
</Button>
// move the event handler into the top level of the function component
let handleClick = (event)=> {
// access the index of the clicked (card's) button.
let index = +event.currentTarget.dataset.index;
dispatch(
agencySlice.editUpdateCardItem({
id: index,
min: formik.values.cardMinUp,
price: formik.values.cardPriceUp,
})
);
setModalState(false);
};