关于ant.design里面form表单的initialValues设置不能实时更新的问题

前端小华

已于 2022-11-30 13:33:10 修改

阅读量1.9k

点赞数

文章标签：前端 html react native react.js javascript

于 2022-09-01 13:56:57 首次发布

本文链接：https://blog.csdn.net/m0_65808332/article/details/126641648

版权

初步理解：initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变，却又有一些不同，因为 initialValue又会因其他改动而改变。然而当获取的数据重新上来要渲染的时候，initialValue的值却又不改变，所以让人觉得很是捉摸不透。

例：如果第一步操作执行的是修改操作，一些默认值填充上去，如果不作处理，第二部执行新增操作的时候，会把第一个默认的值带着，导致新增弹框弹出来的时候form表单中就是数值，效果体验特别不好，

这个时候form.resetFields()就排上用场，默认什么都不传，就是把form下所有的表达都清空

当你想清空某一个时可以这样 form.resetFields(["表单字段"])来清空某个form表单的值

例：如果是点击查看，弹框form表达，你想达到回显的目的可能会使用initialValues这个方法

但是此方法只有在初始化时才会更新，所以导致每次只能拿到之前的值

错误写法

正确的做法是，使用form.setFieldsValue()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小华

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于ant.design里面form表单的initialValues设置不能实时更新的问题

关于ant.design里面form表单的initialValues设置不能实时更新的
复制链接

扫一扫

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

01-18

场景描述： ... 减免天数 visible={that.state.visible} xss=removed xss=removed> <Form horizontal form={form}> <FormItem {...{labelCol: { span: 5 }, wrapperCol: { span: 16 }

关于antd中的Form组件设置了initialValues属性后，如何在state或者props中的属性变化后，重新渲染修改Form中的数据显示的三种解决办法 React Typescript

weixin_46990115的博客

07-18

1万+

关于antd中的Form组件设置了initialValues属性后，如何在state或者props中的属性变化后，重新渲染修改Form中的数据显示在使用antd的Form组件的时候，遇到这样一个问题：描述：给Form组件设置的initialValues={Object} 只能在初始的时候生效，也就是说，我们如果只改变了state中的值，是无法导致Form中的数据发生变化的。因为使用Form组件后，数据就会同步给Form接管，所以我们得使用form对象里的方法来改变数据的变化。在开始之前我们得了解一下问

参与评论您还未登录，请先登录后发表或查看评论

关于lua next()的用法案例

少侠Smile丶

08-04

562

直接看代码

ant-design form initialValues赋值state的坑

热门推荐

前端菜鸡的博客

07-24

1万+

首先说明initialValues这个属性，这个属性antd官方给的是设置Form组件初始值，但是有个问题如果值从后端请求那么initialValues可能会设置不上，如果说用匿名组件的话，修改From组件会导致一系列问题，接下来就是用到了setFieldsValue和getFieldsValus属性在antd官网中说明form组件不能使用this.setState修改值，只能通过setFieldsValue来设置，通过getFieldsValus来获取首先通过getFieldsValus来动态获取

六、初始化和清理（3）

走在bug的路上

08-01

1084

● 成员初始化 ● 构造器初始化 ○ 初始化的顺序 ○ 静态数据的初始化 ○ 显式的静态初始化 ○ 非静态实例初始化

antd表单中的initialValue不更新的问题

huhaha24的博客

12-01

6517

在做需求的时候，有一个场景是表单根据后端返回的数据重新渲染，本来以为只要在render的时候state的值发生了改变，表单里的值就会发生变化，但是后来发现不是这样的，state值是刷新了，但是表单中的数据并没有更新，而其他直接填充的值都会更新。后来发现是因为initialValue只会在第一次进行渲染，后续数据的更新并不会造成重新渲染。查看了antd的文档后，发现可以通过setFieldsV...

ant-design-vue3.x的form表单爬坑.pdf

12-16

在Ant Design Vue 3.x版本中，表单的使用与之前版本有了一些显著的变化，特别是对于嵌套表单的处理和验证方式。本文将详细解析这些变化，帮助开发者避免在升级过程中遇到的“坑”。首先，让我们关注的是嵌套表单...

解决ant Design中this.props.form.validateFields未执行的问题

01-18

在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。原因：我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了...

基于vue Ant-Design 的表单设计器，快速开发.zip

05-04

基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design ...

vue+ant-design+formBuiler表单构建器-技能提升-form design-亲测有效

05-08

vue+ant-design+formBuiler表单构建器——技能提升——form design——亲测有效 vue+ant-design+formBuiler表单构建器 form design 亲测有效表单构建器 formBuilder插件的使用 vue:表单构建器自定义拖拽表单实现...

antd4.0中Form使用initialValue

天空影

07-06

1万+

悲伤一开始一直以为initialValue是个好东西，这样我每次编辑的时候把数据传过来就行，后来发现不得行！给大家看看就离谱，后面认真看了一下文档才知道这个玩意是默认值，第一次有了之后就一直是这个。然后我在网上看用resetFields()这个方法，然而还是不得行，他每次点击显示的是上一次的数据，所以后面还是老老实实看了一下form的方法。解决放弃initialValue const [form] = useForm() form.setFielsValue(currentItem) 用for

Antd Form表单中initialValue设置无效的问题

qq_57215961的博客

12-14

3101

2. 给Form.Item设置属性 initialValue，此种方法可行。但formData要有初始值。当formData 初始值通过useState({})，设置为空时，此种方法不可行。3. 通过设置setFeildsValue。(场景：通过接口获取数据，将获取到的数据展示出来 )1. Input被Form.item包裹，在input中设置value无效。想要呈现效果（展示form表单，并且在 input中显示初始内容）使用Form.item表单，

Ant Design：Form表单组件的正确使用

闪电⚡之王的博客简介

12-27

1611

在添加的表单中，默认值一般都为空，或者是真假状态的，所以说为Form的 initialValues 属性内的表单项的字段名称对应的值设为空的字符串，或者false默认的radio单选初始值即可。在打开编辑时显示的自然是当前编辑的这项的所有状态，接着还是在 onValuesChange 中使用一个状态拿到最新的更改后的数据提交编辑即可。编辑时的初始值为当前编辑项，所以直接可直接将当前编辑项的整个对象数据放入initialValues属性中当做值即可。allValues为整个最新的状态的表单对象。

antd+form，initialValue值变化后不更新

perfectshao的博客

11-25

7741

项目场景：使用antd组件，弹出层中的编辑表单问题描述：在表格展示数据时，经常会伴随着编辑的操作，点击编辑按钮，弹出表单，并且会将数据显示在编辑表单中，以供用户查看。这时会用到form表单的initialValue属性，用以初始化默认值，可以看到表单中的次数为326. 我将99的次数改为800，成功编辑之后，点击94的配置按钮，这时表单中并没有显示94的数据，反而显示的是刚才修改的数据。我以为是表单中的数据获取错误，console打印一下。获取到的数据确实是94的数据，但是initialValue

antd Form组件initialValues属性在React17中延迟渲染问题

weixin_43704021的博客

02-11

1452

使用antd 的Form Modal搭配，出现一个bug

ThreadLocal常用方法浅析、使用场景及注意事项

qq_42742861的博客

05-29

3366

1. ThreadLocal详解 JDK1.2版本起，Java就提供了java.lang.ThreadLocal，ThreadLocal为每个使用线程都提供独立的变量副本，可以做到线程间的数据隔离，每个线程都可以访问各自内部的副本变量。线程上下文ThreadLocal又称为"线程保险箱"，ThreadLocal能够将指定的变量和当前线程进行绑定，线程之间彼此隔离，持有不同的对象实例，从而避免了数...

动态更新initialValue的值

weixin_46438810的博客

04-23

2288

问题 [antd: Form.Item] defaultValue will not work on controlled Field. You should use initialValues o 原因：antd禁止在form.item下的组件使用默认属性解决办法：删除defaultValue,在中使用initialValue={{ parentId: parentId }}代替，如果要动态更新 parentId的值，又会导致下面的问题 React does not recognize

ant design框架 Form.List怎么能默认显示3条输入姓名手机号的表单

05-24

你可以在Form.List组件中设置initialValues属性来指定默认显示的表单数据。具体步骤如下： 1. 在Form.List组件中添加initialValues属性，该属性的值为一个对象数组，数组中每个对象表示一个默认显示的表单数据。 2...