Formik：如何从数组中设置初始值？答案

【问题标题】：Formik: how to set initial values from array?Formik：如何从数组中设置初始值？
【发布时间】：2019-09-15 00:57:39
【问题描述】：

我的客户对象有一系列与之关联的信用卡，如下所示：

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

谢谢！

【问题讨论】：

有一个 initialValues 属性传递给 formik。您可能想阅读文档
您能否说明到目前为止您所做的哪些工作在您需要帮助的地方不起作用？
@sagar.acharya 我知道 initialValues 道具。我的问题是当可能有 0 到多个 paymentMethods 时如何指定数组值。
@Rikin 我已经在INITIAL_VALUES 对象中尝试了明显的paymentMethods: customer.paymentMethods，但这没有任何作用。
找到解决方案了吗？

标签： reactjs formik

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我已经在使用initialValues，就像这样：<Formik initialValues={INITIAL_VALUES}... /> 我的问题是如何指定 paymentMethods 数组的初始值。 paymentMethods: customer.paymentMethods 不起作用。