我需要使用 formik FieldArrays 更新服务器上的信息。我找不到将 [new] 插入新字段然后将它们转换为后端豁免的行的方法。 我从数组中的服务器接收初始数据
"documents": [
{
"document_type": {
"id": 1,
"name": "Внутренний"
},
"citizenship": {
"id": 2,
"name": "американское"
},
"number": "1111 111111",
"name": "Иван",
"surname": "Никонов",
"date": 1677060272
}
]
如果我需要更新信息，对服务器的请求应该是这样的
documents[23][document_type_id]':1,
documents[23][citizenship_id]':1,
documents[23][number]': '44444',
documents[23][surname]': 'ffffff',
documents[23][name]': 'ffffff',
documents[23][date]': 1677060272
如果我添加一些新字段，它们应该看起来像
documents[new][1][document_type_id]':1,
documents[new][1][citizenship_id]':1,
documents[new][1][number]': '44444',
documents[new][1][surname]': 'ffffff',
documents[new][1][name]': 'ffffff',
documents[new][1][date]': 1677060272
父组件
<Formik
initialValues = {vals}
validationSchema={SignupSchema}
enableReinitialize={true}
onSubmit={(values, { resetForm}) => {
console.log(values, 'to send')
const { birth} = values;
const dataToSend = Object.assign(values, {birth: getUnixTime(new Date(birth))} )
return updateHandler(dataToSend)
}}
>
{({ values, handleSubmit, handleChange, errors }) => (
<Form onSubmit={handleSubmit} className="form control__form">
<div className="form__block bordered white">
<h3 className="h3">Данные</h3>
<div className="form__fieldset">
<Field
name={`surname`}
component={Input}
label='Фамилия'
type='text'
/>
<Field
name={`name`}
component={Input}
label='Имя'
type='text'
/>
<Field
name={`patronymic`}
component={Input}
label='Отчество'
type='text'
/>
</div>
<div className="form__fieldset">
<Field
name={`birth`}
component={Datapicker2}
label='Дата рождения'
/>
<div className="form__label-radio">
<div className="name">Пол</div>
<label className="label-radio">
<Field
type='radio'
name='sex_id'
className="input-radio"
value='1'/>
<span className="input-radio__mark"></span>
<span>Мужской</span>
</label>
<label className="label-radio">
<Field
type='radio'
name='sex_id'
className="input-radio"
value='2'/>
<span className="input-radio__mark"></span>
<span>Женский</span>
</label>
</div>
</div>
<div className="form__fieldset">
<Field
name={`email`}
component={Input}
label='E-mail'
type='email'
/>
<Field name={'phone'}
component={InputMasked}
label={'Телефон'}
mask={'+7 (999) 999-99-99'}
type='text'
/>
</div>
{currentUserId !== 3 &&
<div className="form__fieldset">
<Field
name={'company_id'}
component={SelectorCompanies2}
label='Компания'
/>
</div>
}
</div>
<div className="form__block bordered white">
<h3 className="h3">Документы</h3>
<FieldArray name="documents" component={FieldArrayDocks} />
</div>
<div className="form__block bordered white">
<h3 className="h3">Мильные карты</h3>
<FieldArray name="miles_cards" component={FieldArrayMiles} />
</div>
<div className="form__block bordered white">
<h3 className="h3">Права</h3>
<div className="form__fieldset">
<Field
name={'active'}
component={StatusSelector}
label='Статус'
/>
<div className="form__checks">
<label className="label-checkbox">
<Field
type='checkbox'
name='access'
className="label-checkbox__checkbox"
value='access'
cahecked='access' />
<span>Доступ в личный кабинет</span>
</label>
<label className="label-checkbox">
<Field
type='checkbox'
name='travel'
className="label-checkbox__checkbox"
value='travel'/>
<span>Тревел-менеджер</span>
</label>
<label className="label-checkbox">
<Field
type='checkbox'
name='accountant'
className="label-checkbox__checkbox"
value='accountant'
/>
<span>Бухгалтер</span>
</label>
</div>
</div>
</div>
<div className="control__btns">
<BtnMain text={'Сохранить изменения'} eltClass={''} type="submit" disabled={updateLoading}/>
<BtnAds text={person?.active ? 'Деактивировать сотрудника': 'Активировать сотрудника'} icon={person?.active ? 'eye-unsee': 'eye-see' } clickAction={deactivateItem} />
<BtnAds text={'Удалить сотрудника'} icon={'trash-can'} clickAction={deleteItem}/>
</div>
</Form>
)}
</Formik>
表单数组组件
export const FieldArrayDocks = (arrayHelpers: any) => (
<>
{arrayHelpers.form.values.documents.map((vals: any, index: number) => {
return (
<>
<div className="form__fieldset-wrapper" key={index}>
<div className="form__fieldset">
<Field
name={`documents[${index}].citizenship_id`}
component={SelectorCitizenship2}
/>
</div>
<div className="form__fieldset">
<Field
name={`documents[${index}].document_type_id`}
component={SelectorDocuments2}
/>
<Field
name={`documents[${index}].number`}
component={Input}
label='Номер документа'
/>
<Field
name={`documents[${index}].date`}
component={Datapicker2}
label='Дата окончания'
initialValues={`documents[${index}].date` || new Date().toString()}
/>
</div>
<div className="form__fieldset">
<Field
name={`documents[${index}].name`}
component={Input}
label='Имя в документе'
initialValues={`documents[${index}].name`}
/>
<Field
name={`documents[${index}].surname`}
component={Input}
label='Имя в фамилия'
/>
</div>
</div>
</>
);
})}
<div className="form__fieldset">
<BtnExport text={'Добавить документ'} changeAction={() => arrayHelpers.push(initialDocks)}/>
</div>
</>
)