react antd常见报错Each child in a list should have a unique “key“ prop

news2024/12/25 15:52:32

常见的一个报错内容:原因可能真的很奇怪,但是那就那么三四种情况,在此记录一下这个问题

console.js:213 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Panel`. It was passed a child from LogDialog. See https://reactjs.org/link/warning-keys for more information.

常见的报错情况总结

1.Map遍历渲染数据

这是最常见的一种,也是最容易发现和解决的一种情况,相信做react开发的同学都知道这个问题

解决方式:给被遍历的组件加上 key 属性 

2.Table表格数据渲染

这个也是常见的一种,在antd中的table渲染的时候,要求每一行数据有一个单独的key,或者给table设置rowKey属性就可以解决

第一种解决方案:给table设置rowKey属性 

第二种解决方案:给数据加上key属性

3.Select选择器中的Option 

 这个也是比较常见的一种吧,类似map渲染,一样要加上key

解决办法:在map里面的子组件加上key属性

4.Modal 对话框组件

这个应该是最难发现的一个的情况,解决办法也是神奇,想不通为啥这个会报错,其他的遍历我都能理解,但是这个.....

解决办法:给页脚组件设置 key 属性,写一个固定值也可以解决这个报错

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/914535.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

4G工业路由器的功能与选型!详解工作原理、关键参数、典型品牌

随着工业互联网的发展,4G工业路由器得到越来越广泛的应用。但是如何根据实际需求选择合适的4G工业路由器,是许多用户关心的问题。为此,本文将深入剖析4G工业路由器的工作原理、重要参数及选型要点,并推荐优质的品牌及产品,以提供选型参考。 一、4G工业路由器的工作原理 4G工业…

gitee远程仓库——Git常用远程仓库托管服务

远程仓库 我们的代码不能总是放在本地,因为总是放在本地,一旦电脑出现故障,数据将丢失,怎么共享呢?这里我们需要一个服务器,我们可以把代码放到服务器上,然后让别人下载,这样我们既…

动力节点Java项目的开发原则与核心业务介绍

文章目录 一 项目开发原则 1.1 web开发项目的步骤: 1.2 crm的技术架构:客户关系管理技术框架 1.3 开发目的 1.4 软件公司的组织结构 1.5 软件开发的生命周期 1)招标 2)可行性分析 3)需求分析 4)…

Dockerfile文件详细

Dockerfile 是一个文本文件,里面包含组装新镜像时用到的基础镜像和各种指令,使用dockerfile 文件来定义镜像,然后运行镜像,启动容器。 dockerfile文件的组成部分 一个dockerfile文件包含以下部分: 基础镜像信息&…

python爬虫-网页数据提取

import requests #headers 网页右键->Network->最下面的User-Agent复制。 headers {"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"} #你想要的网址 url &q…

基于大语言模型知识问答应用落地实践 – 知识库构建(上)

01 背景介绍 随着大语言模型效果明显提升,其相关的应用不断涌现呈现出越来越火爆的趋势。其中一种比较被广泛关注的技术路线是大语言模型(LLM)知识召回(Knowledge Retrieval)的方式,在私域知识问答方面可以…

HTTP协议(JavaEE初阶系列15)

目录 前言: 1.HTTP协议 1.1HTTP协议是什么 1.2HTTP协议的报文格式 1.2.1抓包工具的使用 1.2.2HTTP请求 1.2.3HTTP响应 2.HTTP请求 2.1首行的组成 2.2.1URL的组成 2.2认识“方法”(method) 2.2.1GET方法 2.2.2POST方法 2.2.3GET…

【AIGC】单图换脸离线版软件包及使用方法

云端再好,都不如放自己手里啊,想怎么就怎么玩。云端再好,都不如放自己手里啊,想怎么就怎么玩。 Roop作为一个新出的开源项目,配置起来还是有一定难度的。 我已经把各种依赖,模型,环境配置已经…

c++--动态规划回文串问题

1.回文子串 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 给定一个字符串 s ,请计算这个字符串中有多少个回文子字符串。 具有不同开始位置或结束位置的子串,即使是由相同的字符组成,也会被视作不同的子串。 示…

23-props详解

一. 什么是prop Prop定义: 组件上注册的一些 自定义属性 Prop作用: 想子组件传递数据 特点: 1. 可以传递 任意数量 的Prop 2. 可以传递 任意类型 的Prop 二. Props校验 思考: 组件的prop 可以乱传吗? 作用: 为组件的 prop 指定验证要求,不符合要求,控制台就会有提示错误 …

图神经网络与分子表征:2. 读懂SchNet

SchNet 在2018年的面世彻底引爆了神经网络势函数(NNP, Neural Network Potential)领域,虽然说NNP的开山鼻祖还要更早,但均未像 SchNet 这样真正被物理化学家接受,引发变革。 这篇博客浅浅记录下自己阅读SchNet代码的心得。2023年的今天&…

shell 脚本基础(四十三)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、概述 1. 概念 2. 学习路径 2.1表达式 2.2 语句 2.3 函数 2.4 正则表达式 2.5 文件操作四剑客 二、表达式 1.shell 2.1 变量 2.2.1组成 2.2.2 类型 2.2.3 作用域…

二级评论列表功能

一:需求场景 我的个人网站留言列表在开发时,因为本着先有功能的原则。留言列表只有一级,平铺的。 当涉及多人回复,或者两个人多次对话后, 留言逻辑看着非常混乱。如下图 于是,我就打算将平铺的列表&#…

【数据备份、恢复、迁移与容灾】上海道宁与云祺科技为企业用户提供云数据中心容灾备份解决方案

云祺容灾备份系统支持 主流虚拟化环境下的虚拟机备份 提供对云基础设施 云架构平台以及 应用系统的全方位数据保护 云祺容灾备份系统规范功能 增强决策能力 高效恢复数据至可用状态 有效降低恢复成本 更大限度减少业务中断时间 保障业务可访问性 开发商介绍 成都云祺…

部署 Windows 域(一)

目录 简介 1. 部署 AD 前的准备 2. 部署 Windows 域的过程 2.1 安装域控制器 2.2 将客户机加入域 1.联机加入域 2.脱机加入域 简介 前面章节介绍了域的相关概念,以及工作组和域的主要区别,想要实现域环境,就必须部署至少一台域控制器。…

BUCK电路-TL494方案 持续更新大概2周更新完成

目录 一、电磁感应现象 这个现象是如何产生的 磁生电的变换的条件 二、电感的伏安特性 计算磁场大小可以用上面这个公式 磁感应强度B来表示 u0是真空磁导率 N是线圈的匝数 I是通过这个线圈的的电流大小 电生磁的过程就是由I来生成这个B 可以加入磁芯提高磁感应强度 …

Lnton羚通云算力平台【PyTorch】教程:关于Tensors的基础知识

Tensors Tensors 是一个特殊的数据结构,非常类似于数组和矩阵,在 PyTorch 中,我们使用 tensors 编码模型的输入和输出,以及模型的参数。 Tensors 非常类似于 NumPy 的 ndarrays, tensors 可以运行在 GPU 以及其他硬件…

IDEA项目实践——Element UI概述

系列文章目录 IDEA项目实践——JavaWeb简介以及Servlet编程实战 IDEA项目实践——Spring当中的切面AOP IDEA项目实践——Spring框架简介,以及IOC注解 IDEA项目实践——动态SQL、关系映射、注解开发 IDEWA项目实践——mybatis的一些基本原理以及案例 文章目录 …

webrtc学习(七)-媒体协商

一.概述 媒体协商嘴主要的作用就是看通信双方都支持那些编解码器,这些编解码器又包含那些参数,比如音频的参数包括采样率,采样大小,通道数,对于视频的参数包括分辨率帧率等一系列参数,此外传输中用的payloa…

基于GRU门控循环网络的时间序列预测matlab仿真,对比LSTM网络

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 LSTM: GRU 2.算法运行软件版本 matlab2022a 3.部分核心程序 %构建GRU网络模型 layers [ ...sequenceInputLayer(N_feature)gruLayer(N_hidden)f…