福米克:如何从数组中设置初始值?

Question

>我有客户对象，这些对象具有与之关联的信用卡数组，如下所示：

{
"_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>
}
}

我想在福米克中设置初始值。 喜欢这个：

const INITIAL_VALUES = {
firstName: customer.firstName,
lastName: customer.lastName,
email: customer.email,
phoneNumber: customer.phone,
paymentMethods: ???????
};

我希望能够编辑付款方式信息。 我可以绘制表单，以便字段都出现正确的次数，但是如何使用 formik 设置初始值？

谢谢！

Answer 1

formik 有一个 initialValues 属性，你可以传递一个对象，每个键代表输入的值。

我猜你正在使用一个自定义输入来支付方法，它返回一个选定方法的数组作为回调，所以它应该接受一个数组作为初始值，然后你可以简单地将 formik 值[inputName] 传递给你的自定义输入，在你的INITIAL_VALUES对象中，你可以传递数组本身

Answer 2

正确指定初始值：<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(