React模态更新项目的错误

49 阅读1分钟

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

{cardItemData.map((cardItem, index) => (
                                                            <>
                                                                <tr id={index}>
                                                                    <td>{cardItem.min}</td>
                                                                    <td>{cardItem.price}</td>

                                                                    <td>
                                                                        <Dropdown>
                                                                            <DropdownToggle
                                                                                hasIcon={false}>
                                                                                <Button
                                                                                    icon='MoreHoriz'
                                                                                    color='dark'
                                                                                />
                                                                            </DropdownToggle>
                                                                            <DropdownMenu>
                                                                                <DropdownItem>
                                                                                    <Button
                                                                                        ref={cardId}
                                                                                        id={
                                                                                            cardItem.id
                                                                                        }
                                                                                        onClick={() => {
                                                                                            dispatch(
                                                                                                agencySlice.removeUpdateItem(
                                                                                                    index,
                                                                                                ),
                                                                                            );
                                                                                        }}
                                                                                        icon='trash'
                                                                                        size='sm'
                                                                                        isOutline={
                                                                                            !darkModeStatus
                                                                                        }
                                                                                        color='dark'
                                                                                        isLight={
                                                                                            darkModeStatus
                                                                                        }
                                                                                        className={classNames(
                                                                                            'text-nowrap',
                                                                                            {
                                                                                                'border-light':
                                                                                                    !darkModeStatus,
                                                                                            },
                                                                                        )}>
                                                                                        {t(
                                                                                            'pages.users.buttonDelete',
                                                                                        )}
                                                                                    </Button>
                                                                                </DropdownItem>

                                                                                <DropdownItem>
                                                                                    <Button
                                                                                        onClick={() =>
                                                                                            setModalState(
                                                                                                !modalState,
                                                                                            )
                                                                                        }
                                                                                        tag='a'
                                                                                        to
                                                                                        icon='pencil'
                                                                                        size='sm'
                                                                                        isOutline={
                                                                                            !darkModeStatus
                                                                                        }
                                                                                        color='dark'
                                                                                        isLight={
                                                                                            darkModeStatus
                                                                                        }
                                                                                        className={classNames(
                                                                                            'text-nowrap',
                                                                                            {
                                                                                                'border-light':
                                                                                                    !darkModeStatus,
                                                                                            },
                                                                                        )}>
                                                                                        {t(
                                                                                            'pages.users.buttonEdit',
                                                                                        )}
                                                                                    </Button>
                                                                                </DropdownItem>
                                                                            </DropdownMenu>
                                                                        </Dropdown>
                                                                    </td>
                                                                </tr>

                                                                <Modal
                                                                    titleId
                                                                    isOpen={modalState}
                                                                    setIsOpen
                                                                    isStaticBackdrop
                                                                    isScrollable
                                                                    isCentered
                                                                    size
                                                                    isAnimation>
                                                                    <ModalHeader
                                                                        className
                                                                        setIsOpen={() =>
                                                                            setModalState(false)
                                                                        }>
                                                                        <ModalTitle id>
                                                                            Düzenle
                                                                        </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'>
                                                                                    Kaydet
                                                                                </Button>
                                                                            </div>
                                                                        </div>
                                                                    </ModalBody>
                                                                </Modal>
                                                            </>
                                                        ))}