Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initial

使用antd: Form.Item组件的defaultValue属性之后，页面虽然显示了数据但是报错;

警告：[antd:Form.Item]`defaultValue`对受控字段无效。您应该改用Form的“initialValues”。

问题代码

  function formInput() {if (!objData) return false;return Object.keys(objData).map((item, index) => {return (<Form.Itemlabel={item}key={index}name={`${item == '用户' ? 'userName' : 'password'}`}rules={[{ required: true, message: `请输入${item}` }]}// initialValue={objData[item] ? objData[item] : ''}><Inputdisabled={item == '用户'}type="text"autoComplete="off"defaultValue={objData[item] ? objData[item] : ''}onChange={(e) => onChangInputForm(e, item)}placeholder={`请输入${item}`}allowClear/></Form.Item>);});}
//defaultValue报错

解决代码

  //使用 initialValue 替代defaultValue 添加在Form.Item标签内
function formInput() {if (!objData) return false;return Object.keys(objData).map((item, index) => {return (<Form.Itemlabel={item}key={index}name={`${item == '用户' ? 'userName' : 'password'}`}rules={[{ required: true, message: `请输入${item}` }]}initialValue={objData[item] ? objData[item] : ''}><Inputdisabled={item == '用户'}type="text"autoComplete="off"// defaultValue={objData[item] ? objData[item] : ''}onChange={(e) => onChangInputForm(e, item)}placeholder={`请输入${item}`}allowClear/></Form.Item>);});}

只需要改这两处就可以。。其余代码什么意思可以忽略，我这个结构是做的表格动态新增列与新增行的部分代码。。

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initial相关推荐

antd Form.Item 中如何获取到Select的label值
存在这样的一个情况: 在这样的一个下拉的选择框中,如何获取到对应的商品类型的值,和label的值在select 中存在这样的一个属性: labelInValue 看看我们怎么使用: 代码: < ...
antd Form.Item的name是数组时如何取值
前提:item的name是这种数组形式的时候,可以在不处理数据结构的同时,直接获取目标参数值,同时还可以创建form表单数据结构. 解:当item的name为数组时,后面的参数会作为前一个参数的属性存 ...
[React hooks] Antd Form: Instance created by `useForm` is not connected to any Form element.Forget t
场景: Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `for ...
antd Form 表单验证
微信公共号开发,用户修改密码,对用户输入的密码进行校验 1. 必须填写 2. 字符串中必须包含大写字母,小写字母和数字 3. 长度不得小于6 代码实现: <Form.Item name='new ...
react antd form 表单清空
关于react_antd_desgin的学习这两天也是获取到的知识零零散散,大多在网上也能获取的到,所以隔了很长的时间,没有编写关于react相关的文章.今天之所以写也是因为公司中秋节放假,在郑州,窗 ...
Antd Upload 和 Antd Form 结合的踩坑记录
今天弄了半天这个上传组件结合表单组件的问题. 这个上传文件列表,如果是当前正在修改或者上传成功,当然是可以正常工作的,但是想要增加一个功能: 下次打开 Modal 时,表单字段中的上传文件字段,可以默 ...
antd form 表单数据校验·记
目录一.antd form 表单校验语法二.antd form 表单校验规则三.antd form 表单校验实例 1.一般的表单校验 2.连续的表单校验 3.连续的复杂表单校验 (1).Form ...
React之antd Form回显数据
转自:https://blog.csdn.net/welkin_qing/article/details/110004969 文章目录一.antd4如何回显数据 1. 定义变量 2. 保存接口数据到 ...
Antd Form 自定义表单控件
首先我们直接在自定义组件中打印看一下props能得到什么: 可以看到Form.Item向我们的自定义组件内部传递了一个value和一个onChange事件那么我们可以在自己定义的组件内部维护好一个s ...
ant-design中form组件的item在typescript环境下自定义提示文字（Form.Item的tooltip属性）及提示图标
一. 实现效果代码环境:react.typescript.ant-design-react ant-design-react中用到的组件为Form 想要实现的效果如下图: 上图中: ① 每个labe ...

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initial

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initial相关推荐

最新文章

热门文章