Formik:如何从数组设置初始值?

时间:2019-09-15 00:57:39

标签: reactjs formik

我有一些与客户相关联的信用卡的客户对象,如下所示:

{
  "_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设置初始值?

谢谢!

2 个答案:

答案 0 :(得分:1)

formik具有initialValues属性,您可以传递一个对象,该对象的每个键都代表输入的值。

我猜您正在使用自定义输入的PaymentMethods,它返回选定方法的数组作为回调,因此它应接受一个数组作为initialValues,然后您可以简单地将formik values [inputName]传递给自定义输入和INITIAL_VALUES对象您可以传递数组本身

答案 1 :(得分:0)

您正确指定了初始值:<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