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

最新推荐文章于 2024-03-15 09:05:24 发布
置顶 最新推荐文章于 2024-03-15 09:05:24 发布
阅读量1.8w 收藏 8
点赞数 19
分类专栏： react web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43690438/article/details/110523203
版权

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

错误代码：
在这里插入图片描述
报错截图：
在这里插入图片描述
在这里插入图片描述
翻译之后也不是很明白，最后百度后找了方法解决这个错误
下面是我的 解决的方法;

  1. 去掉defaultValue
    在这里插入图片描述
  2. 将初始值用initialValues={{name:key}}的形式写在from标签里面
    在这里插入图片描述
    利用上述方法，就解决了这个麻烦的问题~（有错误的地方欢迎指出）
草莓丸子不加冰
关注
专栏目录
antd Form 组件使用 Select 组件设置 defaultValue 报错 defaultValue is invalid for getFieldDecorator ...
m0_37148591的博客
05-06 2万+
前言 日常积累，欢饮指正 问题描述 错误代码段 import * as React from 'react' import { Card, Form, Select } from 'antd' const Option = Select.Option import { FormComponentProps } from 'antd/lib/form' interface IState { /...
react+antd form 警告Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.
feinifi的博客
07-14 2万+
如题所示，该警告出现在react与antd使用中，我们页面表单form中使用了Form.Item包含输入框，在username输入框的下面，加入了一行提示文字，代码如下： import React from 'react' import {Card,Form,Input,Button} from 'antd' import 'antd/dist/antd.css' const LoginForm = () => { const onFinish = values =>{ co...
[antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` o
菜菜鸟的博客
05-14 4562
antd禁止在form.item下的组件使用默认属性 解决：统一在form组件的initialValues属性里设置
Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initial
weixin_46600931的博客
10-12 4080
警告：[antd:Form.Item]`defaultValue`对受控字段无效。您应该改用Form的“initialValues”。使用antd: Form.Item组件的defaultValue属性之后，页面虽然显示了数据但是报错;只需要改这两处就可以。其余代码什么意思可以忽略，我这个结构是做的表格动态新增列与新增行的部分代码。
`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead
最新发布
今天也要爱小姜的博客
03-15 774
将写在Input或者Select等组件中的defaultValue删除，并将该值写入Form.Item的initialValues。
【Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initi】
weixin_48578764的博客
09-22 779
console.js:176 Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.
antd表单组件设置默认值失效
qq_45104588的博客
11-01 1563
antd表单组件设置默认值失效
实现antd中Form、Form.Item组件
qq_43653724的博客
02-27 6864
实现antd中Form、Form.Item组件 初始化项目 使用create-react-app初始化项目后创建MyRcFieldForm文件，代码如下 import React, { Component, useEffect } from 'react'; import Form, { Field } from 'rc-field-form'; //import Form, { Field } from './components/my-rc-field-form/'; import Input fro
antd-form-item-view-hoc:一个简单的HOC，用于AntD Form.Item，使其仅显示文本而不显示组件。 当您需要表单的查看模式时，此功能很有用
05-15
一个非常简单的HOC，用于AntD Form.Item，使其仅显示文本而不显示组件。 当您需要表单的查看模式时，此功能很有用。 安装 yarn add form-item-view-hoc 用法 这是将此HOC与AntD Form.Item一起使用的示例 import ...
next-with-antd:next.js + Ant设计的最小入门
04-28
接下来与Antd 一个简单的示例，展示了如何使用next.js和antd初始化前端项目。 捆绑包大小 开发：npm run dev-> 2680KB 名称 地位 类型 发起人 尺寸 时间 本地主机 200OK 文档 其他 474 KB / 474 KB 920毫秒 ...
Warning: [antd: Form.Item] `defaultValue` will not work on controlle
m0_48738983的博客
12-27 406
react：form.item中defaultValue报错处理
antdesign中的defaultValue问题
有姿态的北漂的博客
12-23 2万+
问题描述----------： 在react项目中使用antdesign组件，遇到需要给表单元素设置初始值的场景时，官方提供的方法中有一种是使用defaultValue属性。例如： import { Input } from 'antd'; const InputGroup = Input.Group; ReactDOM.render(
ant Design中Select设置initialValue时的大坑
smile_68的博客
02-20 1万+
我出现的问题：例如在编辑活动关联红包的时候，需求是select显示的是红包名称，但是表单提交的时候是红包ID：设置默认值的initialValue为Id的时候，会出现显示是id (需要的是显示名称)；如果设置默认值initialValue是名称，那么下一步操作会出现报错 但是我还有一种情况：某个活动关联的红包被删除了，在Select中的可供选项中redPackets没有这个红包的时候，显示的会是红...
getFieldDecorator will override value
屯庆的博客
12-13 2万+
错误内容 index.js:1452 Warning: `getFieldDecorator` will override `value`, so please don't set `value` directly and use `setFieldsValue` to set it. 报错位置 <FormItem {...formItemLayout} label="位置"...
ant design vue中设置defaultValue报错
征途人生&梦
10-15 6985
在做raido组件时，需要一个默认项，从官网拷贝过来，使用defaultValue没问题。 <a-radio-group v-model="value" @change="onChange"> <a-radio-button value="a"> Hangzhou </a-radio-button> <a-radio-button value="b"> Shanghai
Warning: Use the `defaultValue` or `value` props on
pardon110的博客
08-06 1753
需求 写了一个Select的函数组件，代码如下 function Select({values, callback, disabled=false, readOnly=false,selected}){ return ( <select disabled={disabled} ...
Ant Design Form表单中getFieldDecorator使用异常总结
热门推荐
云生流长的博客
04-04 7万+
背景：在使用Ant Design Form组件时，Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。代码如下所示： // 使用 Form.create 处理后的表单具有自动收集数据并校验的功能 const S...
antd vue中，如何给表单动态添加input，解决遇到一些坑
weixin_33877885的博客
05-13 8217
最近做项目用的组件库Ant Design Vue,这个组件看起来文档很详细，但也会遇到一些意想不到的问题，最后看文档没办法解决，只能去看源码，折腾了好久，终于把问题给解决了，遇到的问题主要是当添加input的时候验证不能友好的使用，当一个input添加，然后删除，提交表单的时候会提示填写删除的input，还有个问题就是当把填写好的内容，删除提交的时候，已删除的内容还是能提交到后台，用方法处理 fo...
`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.
07-27
回答: 这个警告信息是关于Ant Design中的表单组件的使用问题。它提醒我们在受控字段上使用`defaultValue`属性是无效的，应该使用`initialValues`属性来设置表单的初始值。\[1\]\[2\] 通过使用`initialValues`属性，我们可以在表单渲染时设置字段的初始值，而不需要使用`defaultValue`来设置默认值。这样可以确保表单的值与表单组件的状态保持同步，从而实现更好的控制和管理表单数据。 #### 引用[.reference_title] - *1* [关于Ant Design中Form及input组件使用大坑解决方案](https://blog.csdn.net/lxz1151184225/article/details/123894513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [antd表单组件设置默认值失效](https://blog.csdn.net/qq_45104588/article/details/127634691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值