React Antd Menu.SubMenu Warning key值报警

最新推荐文章于 2024-01-16 08:40:20 发布
最新推荐文章于 2024-01-16 08:40:20 发布
阅读量2.2k 收藏 2
点赞数 1
分类专栏： 笔记 React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42876444/article/details/119698940
版权

原来的代码：

 报警状态：

 

修改后的代码：

 报警消失，这个原因在于key值问题，子组件需要父组件的key值。

树梢的东色
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-antd.zip
05-25
在本文中，我们将深入探讨如何使用`react-antd`、`antd` UI 框架、`react-router-dom` 和 `styled-components` 进行React项目开发。这四个关键组件是构建现代前端应用的重要工具，它们能帮助我们快速构建美观且功能...
react antd（基于npm webpack react）.zip
02-10
react antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact...
Duplicated key ‘xxxxxx‘
weixin_47024018的博客
03-13 2282
Vue使用Vuex出错记录 解决办法 注释data属性里面的 这个值，比如我的(‘isCollapse’);在computed属性中添加一个状态管理器即可(使用的是Vuex) isCollapse() { return this.$store.state.tab.isCollapse; }
[已解决]antd a-select Duplicate keys detected: ‘55‘. This may cause an update error.
SSophia的博客
05-09 997
Duplicate keys detected: '55'. This may cause an update error. <a-form-item label="供货商" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> <a-select mode="combobox"
react 封装antd menu组件，路由懒加载，可折叠，可配置显示和隐藏，刷新后选择正确的菜单，打开正确的submenu
徐同保的专栏
07-08 3700
import React, { useEffect, useState, useMemo } from 'react' import { Menu } from 'antd' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import Icon from '../../../components/light/Icon' import Logo from './Logo' const .
Duplicate keys detected: '0'. This may cause an update error.
顽石⚡
11-06 10万+
错误原因 一个template中有两个一样的v-for &lt;div class="info" v-for="(item, index) in currentFriend.content" :key="index"&gt; &lt;div class="d1"&gt; &lt;p v-text="item.time" class=&qu
解决antd menu菜单在切换时，子菜单submenu闪烁问题
u014165391的博客
05-23 2657
问题复现图： 问题描述： 在第一次打开菜单(collapsed: false)时，子菜单会有闪烁的现象，后面再次打开时，显示正常；我也在antd.designde的相关社区找了一些解决方案，都不太理想；突然灵机一动，能不能在打开时，将这块弹窗的css隐藏呢？ 解决方案： 于是，我通过chrome element 找到闪烁子菜单DOM的className, 加入了下面这块代码，测试了一下，成功了。并且充分自测了，并无其他问题。 &.base-menu:not(.ant-men.
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
最新发布
03-07
react：https://react.nodejs.cn/reference/react/hooks antd：https://ant-design.antgroup.com/components/pagination-cn/ axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：...
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
react下的react.min.js和react-dom.js
04-24
在React生态系统中，`react.min.js`和`react-dom.js`是两个核心库文件。 `react.min.js`是React库的压缩版本，"min"代表“最小化”，意味着它已经过混淆和压缩处理，以减少文件大小，提高网页加载速度。这个文件...
关于antd menu 菜单栏点击展开没反应
qq_32825399的博客
01-16 716
antd,antd menu，菜单栏展不开
从Antd 源码到自我实现之 Menu 导航菜单
辰辰沉沉大辰沉
05-24 6182
Antd Menu 简述 Menu 为页面和功能提供导航的菜单列表。 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 核心功能点提取 ...
关于Java8当中List转Map报错“Duplicate key”的原因以及解决办法
MonkeyBrothers的博客
04-20 2万+
    其实Java8的lamdba表达式了解的不是很透彻，在工作中也只是使用最多的就是 for循环遍历、list转map、map转list、分组等功能。需要什么就从网上百度查找，然后按照样子在自己代码中修改下。其中的细节并没有留意过，就在今天我不小心就掉进了坑里。     悲剧发生在今天早上，领导过来问我为什么业务上的数据有的时候会丢失，并让我排查下原因。我起初还怀疑是不是公司另外一端的接口有问题，于是就去问了下有没有上线之类的操作。得到的结果是：没有！     那我就只能从自己的代码入手了，我开始本地启
vue控制台报错Duplicate keys detected: ‘xxxx‘. This may cause an update error.原因解析及解决办法
weixin_44363139的博客
06-07 1万+
for循环中没有保证key值的唯一性导致报错的解决办法
【Gulimall】JSR303校验、集中处理异常、分组校验、自定义校验、错误收集时Duplicated key避免
qq_40265247的博客
12-06 1592
先给个实体类的校验注解示意，其中@ListValue为自定义校验注解 @Data @TableName("pms_brand") public class BrandEntity implements Serializable { private static final long serialVersionUID = 1L; /** * 品牌id */ @NotNull(message = "修改必须指定品牌id",groups = {UpdateGroup.class}) @Null(
vue报key值重复时解决办法Duplicate keys detected: ''.This may cause an update error.
weixin_38373875的博客
06-14 4万+
vue报key值重复 Duplicate keys detected: ‘’.This may cause an update error. 为什么for循环后要加key值，否则会爆红，会产生什么影响？ for循环读取key值时， key需要是唯一的，如果key值重复会导致报错，影响页面渲染卡顿。 出问题的代码 <el-col :span="1" v-for="(one,i...
报错解决 Duplicate keys detected: '1'. This may cause an update error.
热门推荐
随便记记
03-01 13万+
错误信息如下： 原因： key值不唯一 解决: 仔细检查是否用了同一个数据循环且:key值相同，如果相同给第二个key随便加一个标记就可以，如下： :key="index + '-only'"...
关于eslint遇到的报错信息以及解决方法
m0_38038767的博客
11-12 1万+
1、 Duplicate key/ Duplicated key 存在重复声明的key值，视情况解决 （PS：在uniapp中 // #ifdef H5 test: 1 // #endif // #ifdef MP-WEIXIN test:2 // #endif 这样的情况也会报错） 2、 Parsing error: x-invalid-end-tag vue/no-parsing-error 这种报错是因为vue将标签渲染为原生标签的时候，有些标签是自闭合的，所以有end标签会报错 解决方法是设置规则
[Vue warn]: Duplicate keys detected: ‘xxx‘. This may cause an update error.
初心不改
08-19 461
截图 原因 网上很多都在说是遍历的时候key值存在重复不唯一导致的。查了一下，果然是这样。我新增了一个页面然后router路由引入该组件时路径path与之前的一个页面路径重复了，导致出错。修改为别的路径就好了。 ...
react,js和antd4.x表单的t提交
05-30
在React.js和Ant Design 4.x中，表单的提交可以通过使用Form组件的onFinish属性来实现。当表单中的所有表单项都通过验证时，onFinish事件会被触发，并且会将表单的值作为参数传递给事件处理函数。下面是一个简单的例子，展示了如何在React.js和Ant Design 4.x中提交表单。 首先，在你的代码中导入所需的模块： ```js import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; ``` 接下来，创建一个表单组件： ```js const MyForm = () => { // 定义表单项的值 const [form] = Form.useForm(); // 表单提交事件 const handleSubmit = (values) => { console.log('Received values of form: ', values); // 在这里可以提交表单数据到服务器 }; return ( <Form form={form} onFinish={handleSubmit}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}> <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}> <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 在这个例子中，我们使用了Ant Design的Form、Input和Button组件来创建表单。在表单中，我们定义了一个onFinish事件处理函数handleSubmit，当表单中的所有表单项都通过验证时，该事件会被触发。在事件处理函数中，我们可以获取到表单的值，并将其提交到服务器。 最后，我们将表单组件渲染到页面中： ```js ReactDOM.render(<MyForm />, document.getElementById('root')); ``` 这是一个简单的例子，你可以根据自己的需求来添加更多的表单项和验证规则。希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值