关于在react+antd中表单初始化initialValues时无法显示的问题

已于 2023-02-08 17:01:03 修改
阅读量9.6k 收藏 6
点赞数 2
分类专栏： wd 文章标签： reactjs javascript
于 2020-12-25 11:33:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li_sir_ok/article/details/111667737
版权

关于在react+antd中表单初始化initialValues时无法显示的问题

最近初来乍到，在工作中遇到这么个问题，就是修改内容界面时根据id获取到相应的数据显示到页面但是数据不显示的问题。直接看代码！

页面结构、

生命周期

在这里插入图片描述
执行顺序在图中标出了序号render函数执行2次分别是2次和第4次。
此处请求应写在componentWillMount生命周期函数中，此时执行在render之前，Form表单中的 initialValues只会执行一次就是render一次之后后续渲染不会再修改他的值。

antd表单

在这里插入图片描述
解决方法就在于上图中的

this.state.initdata&&

它的意思是this.state.initdata不为空的情况下才展示表单，当我们刚刚进入界面时初始化数据的请求就在componentWillMount中发送了，但是此时ajax是异步的调用，不会立即拿到数据，此时代码向下执行执行render函数，render函数中的this.state.initdata还未获取到所以是null表单不会显示所以initialValues不会赋值，直到1s后请求数据拿到并赋值给state中的initdata，调用完setState函数后会动态修改this.state.initdata的值，此时this.state.initdata的值就不再是null了，表单正常渲染。

Jason_ssr
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【React工作记录三十】react中form表单编辑的时候回显无法回显
geyaoisnice的博客
01-10 3317
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 求助同事 编辑的时候无法进行回显操作 <Form.Item label="机构名称："> {getFieldDecorator('name', { initialValue: type === 'update' ? {..
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
ant-design form initialValues赋值state的坑
最新发布
前端小菜鸟也有人起的博客
07-11 249
ant-design form initialValues赋值state的坑
关于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 565
直接看代码
关于echart-for-react在antd组件中初始化不展示的问题
weixin_44627459的博客
12-12 714
echart-for-react在antd中初始化不显示图表问题
react学习(47)----react中initialValue和value不能一起定义
歌谣的博客
07-16 391
<Row gutter={12}> <Col span={12}> <Form.Item label="活动开始时间"> {getFieldDecorator('startTimeLong', { initialValue: popupByIdDetail.startTimeLong, ...
antd4中Form组件initialValues设置初始值无效，使用setFieldsValue动态赋值，getFieldsValus动态获取值
热门推荐
前端菜鸡的博客
07-24 1万+
首先说明initialValues这个属性，这个属性antd官方给的是设置Form组件初始值，但是有个问题如果值从后端请求那么initialValues可能会设置不上，如果说用匿名组件的话，修改From组件会导致一系列问题，接下来就是用到了setFieldsValue和getFieldsValus属性 在antd官网中说明form组件不能使用this.setState修改值， 只能通过setFieldsValue来设置， 通过getFieldsValus来获取 首先通过getFieldsValus来动态获取
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/> ) } </Form.Item> 正确代码： <Form.Item> { getFieldDecorator('use
React+antd后台管理系统模板
12-01
React+antd后台管理系统模板是一个利用React前端框架和antd UI库构建的管理界面示例项目。这个模板主要用于开发者熟悉React和antd组件库的使用，同时也展示了如何在React应用中集成react-router进行页面路由管理。让...
react+antd+redux实现的一个超全后台管理系统
10-12
在这个项目中，React将作为整个系统的基石，用于构建各种可复用的组件，如表格、表单、导航等。利用React的`props`和`state`，我们可以轻松地传递数据和控制组件行为。 2. **Ant Design集成** Ant Design提供了...
React使用Antd form组件，无法动态更新 initialValues 问题
weixin_42192113的博客
11-03 2024
一、原因 Ant-design 官方文档中已经提到了这一问题的原因， 如下： 二、解决方案 通过 form.setFieldsValue 动态更新表格值 通过父组件传参的方式传入 initialValues
Antd中为select框使用initialValues
Peng的博客
08-30 2625
在学习Antd Pro时遇到了一个问题 问题场景 在ProForm中通过initialValues可以设置表单元素的默认值： <ProForm initialValues={{ username: props.values.username, category_id: props.values.category_id, }} 但是category_id对应的是一个下拉框，这样设置的实际效果与预期效果如下图： 在其他平台中查找
Antd Form表单中initialValue设置无效的问题
qq_57215961的博客
12-14 3129
2. 给Form.Item设置属性 initialValue， 此种方法可行。但formData要有初始值。当formData 初始值 通过useState({})， 设置为空时，此种方法不可行。3. 通过设置setFeildsValue。(场景： 通过接口获取数据，将获取到的数据 展示出来 )1. Input被Form.item包裹， 在input中设置value无效。想要呈现效果（展示form表单，并且在 input中显示初始内容）使用Form.item表单，
antd Form组件initialValues属性在React17中延迟渲染问题
weixin_43704021的博客
02-11 1463
使用antd 的Form Modal搭配，出现一个bug
踩坑 antd Form表单获取input默认值失败，Form表单校验input 必填 默认值为undefined
github_54195343的博客
05-09 4480
问题描述：1，跳转页面后，通过url传参，将参数自动回填到下一个页面的input输入框里，打开页面后，input成功显示回写内容。2，为FormItem添加必填校验required:true。3，提交表单，校验未通过，提示input未填写内容，手动输入则校验成功。 代码如下： 问题在于，rules进行校验的时候，拿到的input value是undefined，如果把rules的校验规则写成自定义的函数，打印value则能直观的看到值为：undefined。 思路：默认值是Input输入框的，除非
react+antd清空表单
05-30
在React中，清空表单可以通过Antd的Form组件提供的`resetFields`方法来实现。具体步骤如下： 1. 在表单的父组件中引入`Form`组件，并将表单的所有控件都用`Form.Item`包裹起来，每个`Form.Item`需要设置`name`属性，这个属性值需要与`getFieldDecorator`方法中的`id`参数保持一致。 ```jsx import { Form, Input, Button } from 'antd'; class MyForm extends React.Component { render() { const { getFieldDecorator } = this.props.form; return ( <Form> <Form.Item label="用户名" name="username"> {getFieldDecorator('username')(<Input />)} </Form.Item> <Form.Item label="密码" name="password"> {getFieldDecorator('password')(<Input.Password />)} </Form.Item> <Form.Item> <Button type="primary" onClick={this.handleSubmit}>提交</Button> <Button onClick={this.handleReset}>重置</Button> </Form.Item> </Form> ); } } ``` 2. 在表单的父组件中定义`handleSubmit`和`handleReset`方法。`handleSubmit`方法用于提交表单，`handleReset`方法用于清空表单。 ```jsx class MyForm extends React.Component { handleSubmit = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }; handleReset = () => { this.props.form.resetFields(); }; render() { //... } } ``` 3. 在表单的父组件中将`MyForm`组件包裹在`Form.create`函数中，生成一个新的高阶组件，并将其导出。 ```jsx const WrappedMyForm = Form.create({ name: 'my_form' })(MyForm); export default WrappedMyForm; ``` 这样，当用户点击表单中的“重置”按钮时，表单中的所有控件都会被清空。如果想要清空表单中的某一个控件，可以通过`setFieldsValue`方法来清空，具体可见前面的回答。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值