reactjs 如何从数组中设置初始值？

zfycwa2u 于 2023-03-12 发布在 React

关注(0)|答案(2)|浏览(145)

我有一个客户对象，它有一个与之关联的信用卡数组，如下所示：

{
  "_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？
谢谢！

reactjs

来源：https://stackoverflow.com/questions/57940356/formik-how-to-set-initial-values-from-array

2条答案

按热度按时间

kpbwa7wx1#

formik有一个initialValues属性，您可以传递一个对象，其中每个键表示输入的值。
我猜您正在为paymentMethods使用一个自定义输入，它将所选方法的数组作为回调返回，因此它应该接受一个数组作为initialValues，然后您可以简单地将formik values[inputName]传递给自定义输入，并在INITIAL_VALUES对象中传递数组本身

赞(0）回复(0）举报 2023-03-12

yr9zkbsy2#

正确指定initialValues：<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）

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 如何从数组中设置初始值？

2条答案

相关问题

热门标签

最新问答