You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

从antd表单中映射数组时出现Typescript问题。

您需要使用typescript中的泛型来解决此问题。下面是示例代码:

import React from 'react';
import { Form, Input, Button } from 'antd';

interface IFormData {
  name: string;
  age: number;
}

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (formData: IFormData[]) => {
    console.log('form data: ', formData);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Form.Item key={field.key}>
                <Form.Item
                  {...field}
                  name={[field.name, 'name']}
                  fieldKey={[field.fieldKey, 'name']}
                  rules={[{ required: true, message: 'Missing name' }]}
                >
                  <Input placeholder="Name" />
                </Form.Item>
                <Form.Item
                  {...field}
                  name={[field.name, 'age']}
                  fieldKey={[field.fieldKey, 'age']}
                  rules={[{ required: true, message: 'Missing age' }]}
                >
                  <Input placeholder="Age" />
                </Form.Item>

                <Button type="link" onClick={() => remove(field.name)}>
                  Remove
                </Button>
              </Form.Item>
            ))}

            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add user
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在此示例代码中,我们首先定义了一个接口IFormData,其中包含name和age两个属性。然后,在表单提交时,我们使用formData参数来获取表单中所有用户的数据。要使用Form.List和fields.map在表单中映射数组,我们需要传递IFormData类型的字段对象数组。这通过在Form.List组

本文内容通过AI工具匹配关键字智能整合而成,仅供参考,火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见,您可以通过联系service@volcengine.com进行反馈,火山引擎收到您的反馈后将及时答复和处理。
展开更多
面向开发者的云福利中心,ECS 60元/年,域名1元起,助力开发者快速在云上构建可靠应用

社区干货

前端AST详解,手写babel插件|社区征文

机器码的⽣成⼀些⾼级编辑器的错误提示、代码⾼亮、代码⾃动补全;- 对于前端来说很多⼯具,例如 elint 、 pretiier 对代码错误或⻛格的检查,babel、typescript对代码的编译处理等等。 [AST在线预览网站](https:/... [在这里插入图片描述](https://img-blog.csdnimg.cn/925224b5888d43b0862f25caea4bfdb1.png)- CallExpression(函数表达示):比如:setTimeout(()=>{})。callee 属性是一个表达式节点,表示函数,arguments 是一个数组...

特惠活动

热门爆款云服务器

100%性能独享,更高内存性能更佳,学习测试、web前端、企业应用首选,每日花费低至0.55元
60.00/1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

从antd表单中映射数组时出现Typescript问题。 -优选内容

集成 Vue.js 加载 SDK
中选取最合适的图片大小。 说明 传入空数组[]情况下组件会计算图片或其所在容器大小,直接拉取相应大小的图片(若您的图片在不同的设备上尺寸不一样,则不建议传空,该操作会降低 cdn 的命中率)。 unoptimized Bool... objectPosition String 否 layout取值为fill时,用于指定图片元素在容器内的位置,同 css 属性 object-position 相同。 ImageLoaderProps的定义示例如下所示: typescript type ImageLoaderProps = { src: string; ...
按需集成插件
一些不常用的需求由于使用场景少,无法默认集成在SDK中,您可以通过自定义插件的方式按需集成。 基础使用TypeScript client('init',{ ... integrations: [{ name: 'name', // 插件名称,用于去重 setup: (cli... captureConsole插件包模块 说明 版本要求 apmplus/integrations version >=1.2.2 功能说明 在调用全局console对象的时候,将调用参数包装成JS错误并上报到平台上。 参数说明 指定需要hook的levels数组,包括...
集成微信小程序加载 SDK
直接拉取相应大小的图片(若设置为空数组在一定程度上会降低 cdn 的命中率)。 unoptimized Boolean 否 是否关闭图片优化,取值如下所示: true:关闭,关闭图片优化后将不再支持格式自适应、分辨率自适应能力。 false:(默认)开启。 alt String 否 图片加载错误时,用于占位的说明文字。 loader 配置示例 TypeScript // 首先声明所需要的 loader 函数,并进行注册const loaderFunc = (props: ImageLoaderProps) => { const {sr...
数字大屏数据来源概述
此时解析结构为 {sales:1212},则可以被解析为 sales字段,值为 1212;数据解析补充:数据的返回值会被转换成一个表格,转换策略如下: (1)当目标数据为一个非数组 JSON 时,将其作为仅有一行的数据,并获取第一层字段作为表头,值作为第一行的值; typescript {"name":"John","age":12} // 被视为 [{"name":"John","age":12}]→ name age John 12 (2)当目标元素为一个数组 JSON 时,将数组中每一项共同的属性作为表头,值作为相应每一行的值...

从antd表单中映射数组时出现Typescript问题。 -相关内容

自定义图表数据结构与插件属性配置

[];} 2.1 字段说明(1)locationMap字段位置信息,记录每一个自定义字段的 FieldId 数组(2)fieldMap描述 FieldId 对应的完整字段信息,FieldInfo 类型如下: TypeScript interface FieldInfo { // 字段别名(名称) ... 您可以通过 settings 字段定义属性配置表单。如下的 register 方法为自定义图表注册了两个 SettingGroup,第一个包括一个 Input 组件和一个 Select 组件,第二个包括一个 CheckboxGroup 组件。 TypeScript import { ...

前端AST详解,手写babel插件|社区征文

机器码的⽣成⼀些⾼级编辑器的错误提示、代码⾼亮、代码⾃动补全;- 对于前端来说很多⼯具,例如 elint 、 pretiier 对代码错误或⻛格的检查,babel、typescript对代码的编译处理等等。 [AST在线预览网站](https:/... [在这里插入图片描述](https://img-blog.csdnimg.cn/925224b5888d43b0862f25caea4bfdb1.png)- CallExpression(函数表达示):比如:setTimeout(()=>{})。callee 属性是一个表达式节点,表示函数,arguments 是一个数组...

Web/JS SDK集成开发指南

在初始化时设置以下参数: TypeScript window.collectEvent('init', { //.... enable_debug: true // 上线前关闭此参数})同时在需要验证的页面URL后增加如下参数 (5.1.7以后的版本可以不加下面的参数): javascrip... 当路由发生变化后,会重新上报PV和停留时长 disable_track_event 否 boolean类型 事件禁用参数 开启后,所有的埋点都不再上报 enable_custom_webid 否 boolean类型 是否使用自定义webid allow_hash 否 ...

热门爆款云服务器

100%性能独享,更高内存性能更佳,学习测试、web前端、企业应用首选,每日花费低至0.55元
60.00/1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

API 数据来源

当目标数据为一个非数组JSON时,将其作为仅有一行的数据,并获取第一层字段作为表头,值作为第一行的值; typescript {"name":"John","age":12} // 被视为 [{"name":"John","age":12}]转换效果如下: name age John 12 ... 跨域问题解决 以下面的URL为例,假设直接在页面上请求这个地址会有跨域问题,可以通过代理查询的方式得到结果。 plain https://my-cross-origin.com/demo具体的配置方法为: 请求方式选择 POST URL 填https://conso...

集成 Web 上传 SDK

步骤二:初始化 SDK创建 uploader 实例,初始化 SDK。示例代码如下: typescript let uploaderdocument.getElementById('test').addEventListener('change', async function () { const fileList = this.files; ... processAction:视频上传后的处理 action 对象数组,详见 processAction userToken String Yes 不适用 用户 token。 processAction 视频上传后的处理 action 对象数组,包含以下参数: 名称 描述 name Acti...

集成抖音小程序加载 SDK

loaderProps typescript { template: string; domain: string;} typescript { loaderStr: string;} 否 用于图片 URL 拼接的属性,会返回拼接处理参数后的 URL(只有支持URL输入的配置会影响最终生成的 URL... 直接拉取相应大小的图片(若设置为空数组在一定程度上会降低 cdn 的命中率)。 unoptimized Boolean 否 是否关闭图片优化,取值如下所示: true:关闭,关闭图片优化后将不再支持格式自适应、分辨率自适应能力。 fa...

集成 React 加载 SDK

屏幕分辨率以及 imageSizes 属性中指定的图片分辨率列表,选择最合适的分辨率传递至函数的入参 width,函数返回相应分辨率的图片 url。loader 配置示例如下所示: typescript import { ImageLoader } from '@volcengi... 直接拉取相应大小的图片(若设置为空数组在一定程度上会降低 cdn 的命中率)。 loading lazy eager 否 定义图片加载行为,取值如下所示: lazy: (默认)懒加载 eager :立即加载 placeholder empty skeleton Stri...

Web/JS SDK分类功能

调用此API会立刻发起alive和close事件(事件的内容为A页面的参数和你访问A页面的时长)。而B页面的时长则需要等到B页面关闭,或者你再次调用此API(将要访问页面C)才会真正上报。 1.5 自动重置时长当路由发生变化时,自... TypeScript datastring的原始值是 { id:2, name:3}经过encodeURIComponent(JSON.stringify({id:2, name:3})) 填到dom上 2.3.3 设置页面采集开启全埋点后,支持设置哪些页面需要采集,哪些页面不需要采集 javascrip...

Web/JS SDK分类功能

调用此API会立刻发起alive和close事件(事件的内容为A页面的参数和你访问A页面的时长)。而B页面的时长则需要等到B页面关闭,或者你再次调用此API(将要访问页面C)才会真正上报。 1.5 自动重置时长当路由发生变化时,自... TypeScript datastring的原始值是 { id:2, name:3}经过encodeURIComponent(JSON.stringify({id:2, name:3})) 填到dom上 2.3.3 设置页面采集开启全埋点后,支持设置哪些页面需要采集,哪些页面不需要采集 javascrip...

特惠活动

热门爆款云服务器

100%性能独享,更高内存性能更佳,学习测试、web前端、企业应用首选,每日花费低至0.55元
60.00/1212.00/年
立即购买

域名注册服务

cn/top/com等热门域名,首年低至1元,邮箱建站必选
1.00/首年起32.00/首年起
立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗,加速分发更实惠
2.00/20.00/年
立即购买

产品体验

体验中心

云服务器特惠

云服务器
云服务器ECS新人特惠
立即抢购

白皮书

一图详解大模型
浓缩大模型架构,厘清生产和应用链路关系
立即获取

最新活动

爆款1核2G共享型服务器

首年60元,每月仅需5元,限量秒杀
立即抢购

火山引擎增长体验专区

丰富能力激励企业快速增长
查看详情

数据智能VeDI

易用的高性能大数据产品家族
了解详情

一键开启云上增长新空间

立即咨询