我的客户对象具有与其关联的一系列信用卡,如下所示:
{
"_id":"5d63e3a32f093f2b5e41ef96",
"firstName": <firstName>,
"lastName": <lastName>,
"email": <email>,
"createdAt":"2019-08-26T13:50:27.409Z",
"modifiedAt":"2019-09-14T20:10:00.257Z",
"paymentMethods":[{
"name": <name>,
"last4": <last4>,
"expirationDate": <expDate>,
"isDefault":false,
"token": <token>
}, {
"name": <name>,
"last4": <last4>,
"expirationDate": <expDate>,
"isDefault":false,
"token": <token>
}, {
"name": <name>,
"last4": <last4>,
"expirationDate": <expDate>,
"isDefault":false,
"token": <token>
}
}
我想在formik中设置初始值。像这样:
const INITIAL_VALUES = {
firstName: customer.firstName,
lastName: customer.lastName,
email: customer.email,
phoneNumber: customer.phone,
paymentMethods: ???????
};
我希望能够编辑付款方式信息。我可以绘制表单,以便所有字段都出现正确的次数,但是如何使用 formik 设置初始值?
谢谢!
formik 有一个initialValues 属性,您可以传递一个对象,每个键代表输入的值。
我猜您正在使用 paymentMethods 的自定义输入,该输入返回选定方法的数组作为回调,因此它应该接受数组作为初始值,然后您可以简单地将 formik 值 [inputName] 传递到您的自定义输入,并在 INITIAL_VALUES 对象中您可以传递数组本身
您正确指定了初始值:
<Formik initialValues={INITIAL_VALUES} />
。然后,当您在 <Formik />
内渲染表单时,您可以访问并渲染 paymentMethods
,如下所示:
formikProps.values.paymentMethods.map((method, index) => (
<div key={index}>
<input
name={`paymentMethods.${index}.name`}
value={method.name}
onChange={formikProps.handleChange}
/>
{/* Render other fields for each paymentMethod*/}
</div>
))
您还可以使用 FieldArray 渲染对象数组 (https://jaredpalmer.com/formik/docs/api/fieldarray)
您可以为
initialValues
指定 paymentMethods
,如下所示:
const INITIAL_VALUES = {
//initial values for other fields here
paymentMethods: customer.paymentMethods,
};