redux React模态更新项目Bug

ttp71kqs  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(157)

在更新过程中,它每次都更新相同id值的信息,可能是什么问题?例如,它在每次更新操作中更新id号为3的字段。
enter image description here
enter image description here

{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>
</>
))}
vzgqcmou

vzgqcmou1#

我想我已经猜到了这个问题&这是一个基本的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);
};

相关问题