index.js:1 Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?

已于 2023-12-21 17:01:35 修改
阅读量705 收藏 1
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2023-12-21 16:48:33 首次发布
原文链接：https://juejin.cn/post/6982925334010134542
版权

最简单的设置方法：

Form.Item 里面的valuePropName设置成空

最近我在使用React+antd重写博客网站，在编写一个表单页面时遇到了如下报错：Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?

在查找后解决方法如下：

报错是因为Upload组件被嵌套在表单中造成的只需要在对应的Form.Item组件上添加 valuePropName="fileList" 属性就可以了

但是虽然解决了初始化后报错问题，但是在上传图片时会出现新的报错，这是我们需要在添加一个属性：

getValueFromEvent={normFile}

主要就是处理上传时的状态使展示上传后的预览图片能顺利进行

nbv12589
关注
react - Ant Design Pro 报错Warning: React.createElement: type is invalid – expected a string (for buil
高级前端工程师
02-01 2798
react，ant design pro，react报错React.createElement，报错怎么办，详细解决办法，如何解决浏览器控制台报错，如何解决ant组件库报错，使用ant design pro创建组件时报错Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got
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 上传(Upload)组件报：Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?
九月萩的博客
06-04 1万+
错误记录： Warning: [antd: Upload] value is not a valid prop, do you mean fileList? Uncaught TypeError: (fileList || []).forEach is not a function 错误原因：上传组件(Upload)写在标签内。 根据：官方文档 解决方法： <Form.Item name="dragger" // 以下两条是必须的 valuePropName="fileList"
Antd Form Upload 报fileList错误-解决方案
飞扬小阁
01-24 3332
把Upload放在Form下面,初始化组件会提示一个错误 [antd: Upload] `value` is not a valid prop, do you mean `fileList`? 解决方案：表单 Form - Ant Designhttps://ant.design/components/form-cn/#components-form-demo-validate-other 提重点： const normFile = (e: any) => { console.log
Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?
weixin_42247563的博客
06-28 2484
antd Swithch 组件使用
【控制台警告】[antd: Checkbox] `value` is not a valid prop, do you mean `checked`?
yqdid的博客
10-12 751
添加：valuePropName=“checked”报错的解决方式就是给。
antd4.x [antd: Switch] `value` is not a valid prop, do you mean `checked`? 解决办法
前端一线搬运工的博客
01-12 1万+
antd4.x版本 出现Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`? 网络上都是3.x版本的处理办法, 4.x解决办法是添加valuePropName属性: <Form.ItemvaluePropName="checked"><Switch /></Form.Item> 举一反三, 如Upload组件 antd4.x版本 出现 Warnin...
LiuZheAb.github.io:一个用 React + Antd + Less + GoJS 构建的博客
07-24
个人博客 用到了哪些 React + Antd + Less + GoJS 地址 LiuZheAb.github.io A Blog Built with React + Antd + Less + GoJS See more on
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a
前端高薪进击手记
03-09 1011
意思是说：v5版本的 react-router-config 包中的所有方法都已经被迁移到了react-router 版本的core核心代码中. 如果你偏向于或者需要把路由定义成JavaScript对象而不是react组件的话，那么你会爱上这种方式，也就是使用useRoutes 方法。这个错误提示是我在配配react的SSR中为了支持路由而报的错误提示。这个错误提示有点奇怪，不是完全的Error提示，而是Warning。万万没想到，搞了我懵逼一天的竟然是一个版本问题。
Warning: [antd: Icon] Empty Icon
SQL-Injection的博客
12-22 5929
Warning: [antd: Icon] Empty Icon 先查看antd版本 npm info antd antd@4.9.4 | MIT | deps: 42 | versions: 552 发现antd版本为V4 V4更新后应如Icon的方法也更新了。官方文档点击此处 首先安装图标组件包、有的可能已经默认安装 npm install --save @ant-design/icons 更新内容链接 下面为官方文档中的解决办法 图标升级# 在 antd@3.9.0 中，我们引入了 svg 图标（
react使用antdesign from 中使用Upload的坑
weixin_44877713的博客
09-08 665
当from组件中使用Upload组件时会报错 虽然程序不至于崩溃但是看着还是比较难受 只需两步 1.设置两个属性 valuePropName=“fileList” getValueFromEvent= {normFile} 像这样 然后添加以后赋值的方法 const normFile = (e) => { //如果是typescript, 那么参数写成 e: any console.log(‘Upload event:’, e); if (Array.isArray(e)) { return e
react + antd desgin 使用form功能时upload，radio，checkbox不能回显的问题
最新发布
ejunda的博客
12-05 510
注意：Switch、Checkbox 的 valuePropName 应该是 checked，否则无法获取这个两个组件的值。由于upload的组件值是fileList，所以需要在form.item组件上多加一个属性即可解决，看代码。最近使用react开发 遇到form回显的问题 ，处理upload回显的问题，提示。所以checkbox和radio对应的值都是checked所以也需要改。查看文档后，在form.item 组件下有一个特殊属性。另外对自定义表单组件也很有帮助。
Antd Upload 和 Antd Form 结合的踩坑记录
weixin_30950887的博客
05-01 6648
今天弄了半天这个上传组件结合表单组件的问题。 这个上传文件列表，如果是当前正在修改或者上传成功，当然是可以正常工作的，但是想要增加一个功能： 下次打开 Modal 时，表单字段中的上传文件字段，可以默认回显文件列表（该列表是 Upload 组件内部实现的）。 由于该 Upload 组件已经使用 Form 组件统一代理，所以需要通过 initialValue 字段进行初始值的设定（如果有的...
antd From 表单报错：warning.js:6 Warning: [antd: Switch] value is not validate prop, do you mean checke?
寬真
07-09 6750
同样的是适用于Checkbox组件 在使用 antd 时，form 表单中使用 switch 报错： warning.js:6 Warning: [antd: Switch] value is not validate prop, do you mean checked? <FormItem label="开关"> {getFieldDecorator('switch', { })(<Switch onChange={this.onChange} />)} <...
antd3 From 表单报错：value is not validate prop, do you mean checked?
reg183的专栏
06-09 1197
antd From 表单报错：warning.js:6 Warning: [antd: Switch] value is not validate prop, do you mean checked? <FormItem label="开关"> {getFieldDecorator('switch', { })(<Switch onChange={this.onChange} />)} </FormItem> 查看文档得知 Switch 组件是通过 che
Antd Upload上传图片nginx报错405
Y_G_G的博客
08-19 2852
antd Upload antd Upload listType 3个类型 一个项目把坑踩全了… 之前使用Upload 是用 action 属性，指定上传地址。现在是在form表单里面使用Upload，不配置action属性，直接formData提交。 问题： 本地调试没问题，打包测试，nginx转发报错405 not allowed 查到原因是 nginx禁止用post访问静态资源 解决： 问：哎 上传图片怎么会访问静态资源呢？？？ 答：默认的上传行为… Upload提供 【 customRe
antd Upload组件设置fileList后onChange只执行一次的解决办法
guxuehua的博客
09-09 9966
最近使用antd Upload组件后发现，当上传失败或者上传格式不正确，也会出现在列表中，想要控制显示列表，需要设置fileList， 设置后发现，onChange只执行一次且拿到的状态一直是uploading,即使服务器上传成功了也拿不到， 最后才发现uploading状态必须设置fileList不然，只执行一次，折腾半天，无语死了，以此记录一下 参考地址 ...
Ant Design Form表单中getFieldDecorator使用异常总结
热门推荐
云生流长的博客
04-04 7万+
背景：在使用Ant Design Form组件时，Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。代码如下所示： // 使用 Form.create 处理后的表单具有自动收集数据并校验的功能 const S...
Uncaught ReferenceError: Vue is not defined at main.js:9:1
11-09
错误 `Uncaught ReferenceError: Vue is not defined` 表明在代码中使用了 `Vue` 对象，但该对象未被定义或导入。根据提供的文档内容，可以看到以下几点： 1. **正确的导入方式**：应该使用 `createApp` 来创建应用实例，而不是直接使用 `Vue` 对象。 2. **重复使用插件**：`Antd` 插件在代码中被多次使用，这可能会导致冲突或不必要的重复操作。 ### 修改建议 1. **移除对 `Vue` 对象的引用**，改为使用 `app` 实例来注册插件和组件。 2. **确保每个插件只注册一次**。 以下是修改后的代码示例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(router); app.use(Antd); // 如果需要单独注册某些组件，可以在这里进行 // app.component('Upload', Upload); // app.component('Button', Button); // app.component('Table', Table); app.mount('#app'); ``` ### 解释 - **`createApp(App)`**: 创建一个 Vue 应用实例，并将 `App.vue` 作为根组件。 - **`app.use(router)`**: 注册路由模块。 - **`app.use(Antd)`**: 注册 Ant Design Vue 组件库。 - **`app.mount('#app')`**: 将应用挂载到 DOM 中的 `#app` 元素上。 通过这些修改，可以避免 `Vue is not defined` 的错误，并确保应用正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值