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

Formik是一个用于构建表单的React库。要从数组中设置初始值，可以使用Formik的initialValues属性。

首先，确保你的表单字段名称与数组中的元素名称相匹配。然后，创建一个包含数组元素的初始值对象，并将其传递给Formik组件的initialValues属性。

以下是一个示例：

import React from 'react';
import { Formik, Field, Form } from 'formik';

const initialValues = {
  arrayField: ['value1', 'value2', 'value3']
};

const MyForm = () => (
  <Formik initialValues={initialValues} onSubmit={values => console.log(values)}>
    <Form>
      <Field name="arrayField[0]" />
      <Field name="arrayField[1]" />
      <Field name="arrayField[2]" />
      <button type="submit">Submit</button>
    </Form>
  </Formik>
);

export default MyForm;

在上面的示例中，我们创建了一个名为arrayField的数组字段，并将其初始值设置为['value1', 'value2', 'value3']。然后，我们在表单中使用Field组件来渲染每个数组元素的输入框，并通过name属性指定了数组元素的索引。

这样，表单将会被初始化为包含数组中元素的初始值。当提交表单时，可以通过onSubmit回调函数获取表单的值。

腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
• 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
• 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
• 对象存储（COS）：https://cloud.tencent.com/product/cos
• 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
• 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
• 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc