ant-design中form表单的setFieldsValue无效或只有第一次渲染

最新推荐文章于 2023-09-04 20:31:03 发布

小灵。

最新推荐文章于 2023-09-04 20:31:03 发布

阅读量1.5k

点赞数 1

分类专栏： ant-design 文章标签： react.js bug

本文链接：https://blog.csdn.net/weixin_57905352/article/details/125274193

版权

ant-design 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 setTimeout(() => {
        form.setFieldsValue(
          {
            roleIdSet: dataSource.filter((val) => val.choose === 1)?.map((item) => item.roleId),
          },
          0,
        );
      });

外面加个定时器就好

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小灵。

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ant-design中form表单的setFieldsValue无效或只有第一次渲染

react ant-design中form表单的setFieldsValue无效或只有第一次渲染
复制链接

扫一扫

专栏目录

为什么使用Form的ref.current.setFiledsValue()时不了值了?

weixin_39238520的博客

04-01

1958

问题描述：在第一次打开modal时，通过用实例ref设置的值是不生效的如图，点击修改打开弹窗前，数据，使用的设值方法都是正确的。但是打开的弹窗值为空。原因如图，经过断点之后，发现ref的实例为undefined，因为第一次使用modal时，此时还没渲染dom节点到dom中，没有实例是很正常的。至于后来的，但是第二次打开之后，可以发现，此时已经正常使用。下图是第二次点击。第二次点击结果如下图，可以看到此时是正常的。解决：第一次使用ref实例，因为还没有dom节点，使用ref当然获取不到实例

Form动态渲染问题(setFieldsValue)

m0_45321059的博客

04-13

6734

关于Form动态渲染问题 Ant 使用setFieldsValue更新Form表单值（antd4.x）新手第一次使用ant的form表单，动态渲染表单。发现当state数据改变时，页面表单数据没有变化，百度了一下，发现表单数据不能通过setState改变，要使用setFieldsValue 步骤一：创建一个ref 步骤二：绑定在Form上步骤三：在你需要更新的地方使用以下语句 thisname为你要更新的表单项的name，后面为更新的值上面三步就是一般更新时的操作 But 我这里说的是动态渲

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

react Ant Design setFieldsValue 无效问题 bug

weixin_39818813的博客

07-20

2471

获取接口数据后，要set到表单中，但是set一直没反应。

antd vue 中关于骨架屏 skeleton 中嵌套form 出现表单内容无法渲染问题

草莓Sir的博客

12-23

1163

antd vue 中关于骨架屏 skeleton 中嵌套form 出现表单内容无法渲染问题问题描述根据官方文档，在使用骨架得时候，内部嵌套得表单，其实目的是为了实现，预加载得时候，loading得效果，数据加载完成之后，在显示，但是如此写法，数据无法渲染，甚至还有些调皮得警告 Warning: You cannot set a form field before rendering a field associated with the value. 问题分析出现以上问题有两点，

[React] 使用Hooks时使用setFieldsValue设置初始值无效的问题

iChangebaobao的博客

11-22

1969

原文链接： https://juejin.cn/post/6844904129253359623 useEffect(() => { if (formConfigListValues.length === 0) { form.resetFields(); } }, [formConfigListValues]); useEffect(() => { if (statusId) { form.setFieldsValue(

antd的form.list中如何setFieldsValue

m0_37679060的博客

03-08

8020

主要就这几行代码： const newData = [ ...getFieldValue("areaData") ]; newData[field.key] = { ...newData[field.key], typeData: testData }; setFieldsValue({ areaData: newData }); 详情看下面： import React, { useState } from "react"; import "./styles.css"; import {

基于 umijs + electron + ant-design-pro 的项目模板开发代码

03-12

`ant-design-pro`不仅包含常见的表单、按钮、布局等组件，还提供了如图表、看板等更复杂的业务组件，极大地提高了开发效率。在"基于 umijs + electron + ant-design-pro 的项目模板开发代码"中，我们可以期待以下...

基于 vue3 + ant-design-vue 的中后台管理系统.zip

05-26

Vue3 + Ant Design Vue 中后台管理系统是一个现代前端框架的应用实例，用于构建高效、可复用且易于维护的企业级管理界面。Vue3 是 Vue.js 的最新版本，提供了许多性能优化和新特性，而 Ant Design Vue 是一套基于 ...

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

热门推荐

刘优秀的博客

06-27

1万+

react中进入表单的编辑页面时需要将之前新建的数据回填，如果是{}的形式需要一一对应，如果是[]的形式需要单独的值意思是不接受数组对象也就是[{},{},{}]的形式解决方法：借用对象，用key去找value......

ant-design Form表单setFieldsValue方法不生效

qq_44512894的博客

04-14

1678

但是由于近视度数的表单是根据判断条件来渲染的，这就会导致这个表单还未被渲染的时候，就已经给leftMyopia这个属性赋值了，结果就是其实leftMyopia这个值并没有赋值上，并且控制台还爆出了警告信息。为了解决这个问题，就不用那种条件判断渲染方式了，直接用css样式来控制这个表单是否在当前条件下显示，这样就不会因为表单还为渲染就赋值的问题了，主要也赋值不上，打印出来的是默认值。initialValue为0。

【前端笔记】Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较

代码基地

06-29

1477

Form 表单中有一个自定义的子组件，当From表单在关闭、重置或取消时候，子组件都会重新渲染，会重新向后端二次请求数据，影响服务性能。一开始，我以为是子组件的或改变了，导致的重新渲染，但是我没有传入任何的情况下，这种事情还是会发生。然后，尝试了一堆和之类的方法，依然无果！最后，使出杀手锏，控制变量法，一行行代码分析。终于定位到了问题原因，是这个函数除了问题。官方解释：为什么 resetFields 会重新 mount 组件？会重置整个 Field，因而其子组件也会重新 mount 从而消除自定

ant-design 设置Form.Item中的input框的值的方法

m0_73481765的博客

09-04

1646

其中，setFieldsValue方法的参数是一个对象，包含需要更新的表单字段和对应的值。注意，字段名必须与表单中的name属性对应。2.可以通过setFieldsValue方法设置表单的初始值或更新表单的值。对于某个表单控件，如果需要设置默认值，可以在该控件上加入。属性来为表单设置默认值。属性，将需要设置的默认值作为一个对象传入。

antD form 数据绑定

weixin_44968614的博客

09-24

2455

import { Form, Input, Button, Select } from 'antd'; const { Option } = Select; const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, }, }; const tailLayout = { wrapperCol: { offset: 8, span: 16, }, }; const Demo = (.

Ant Design 常见用法与坑点总结（二）：Form 表单下拉框设置初始值

weixin_45138590的博客

04-20

2117

Ant Design 是蚂蚁出品的出色优秀的 React 组件库，相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。因此，了解 Ant Design 的常见用法与坑点还是有必要的。本系列文章针对 Ant Design 一些官方文档虽有提及，但是容易被忽略的，又比较重要常见的用法进行总结。同时对工作使用过程当中遇到的坑点进行归纳。

antdesignpro ModalForm使用setFieldsValue多次导致显示不正确

06-13

Ant Design Pro 的 ModalForm 组件在使用 setFieldsValue 方法时，可能会出现多次调用导致显示不正确的问题。这是因为 setFieldsValue 方法会更新表单的值，并且会触发表单的重新渲染。如果在重新渲染之前还有其他的 setFieldsValue 调用，那么之前的修改可能会被覆盖。解决这个问题的方法是，在每次调用 setFieldsValue 方法之前，先调用 form.resetFields 方法，将表单重置为初始状态，然后再调用 setFieldsValue 方法更新表单的值。这样可以确保每次修改都是在一个干净的状态下进行的，不会出现显示不正确的问题。另外，也可以通过使用 form.setFields 方法，直接更新表单的值，而不是使用 setFieldsValue 方法，这样可以避免触发表单的重新渲染。