react异常警告:Each child in a list should have a unique “key” prop

原因:Dom在渲染数组时,需要一个key,不然嵌套数组时会引起歧义

解决:

  1. 1 <div className="classlist-contaier">
  2. 2 {this.state.classList.map((item, index) => {
  3. 3 return <ClassItem key={index}/>;
  4. 4 })}
  5. 5 </div>

另外,如果遍历添加组件时,在组件外再加个div之类的容器,那么key需要在上层添加。比如:

  1. 1 <div className="classlist-contaier">
  2. 2 {this.state.classList.map((item, index) => {
  3. 3 return (
  4. 4 <div key={index}>
  5. 5 <ClassItem/>
  6. 6 </div>
  7. 7 );
  8. 8 })}
  9. 9 </div>

react异常 Each child in a list should have a unique “key” prop的更多相关文章

  1. Each child in an array or iterator should have a unique "key" prop. Check the render method of `CreditCategoryModal`

    参考地址:http://f00sun.com/category/react

  2. React表格报错Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

    解决: <Table bordered rowKey={record=>record.id} //解决 components={this.components} columns={colu ...

  3. REACT Missing “key” prop for element

    https://stackoverflow.com/questions/48266018/missing-key-prop-for-element-reactjs-and-typescript Whe ...

  4. [React Fundamentals] Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  5. [React] React Fundamentals: Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  6. 封装一个处理 react 异常的最简 ErrorBoundary 组件 🎅

    前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址. 错误边界避免一个组件错误导致整个页面 ...

  7. 异常-Phoenix HBASE Last region should end with an empty key. You need to create a new region and regioninfo in HDFS to plug the hole

    1 详细异常信息 RROR: There is a hole in the region chain between \x03\x00\x00\x00\x00\x00\x00\x00\x00 and ...

  8. 写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么

    怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...

  9. 解决React路由跳转时出现的红色警告: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

    一.报警如图: 二.查找路由版本 我使用路由版本是4.3.1的,然后我测试所有4.0+版本都会出现以上警告. 三.未解决前的代码 三.我又解读了一下报警告内容的大致意思:就是props需要通过函数返回 ...

随机推荐

  1. oneDNN

    目录 oneDNN卷积思路 debug捆绑套路 jit_avx2_convolution_fwd_t::execute_forward( 整个文件oneDNN/src/cpu/x64/jit_avx2 ...

  2. Sqoop导入MySQL表中数据到Hive出现错误: ERROR hive.HiveConfig: Make sure HIVE_CONF_DIR is set correctly.ERROR tool.ImportTool: Import failed:

    1.问题描述: (1)问题示例: [Hadoop@master TestDir]$ sqoop import --connect jdbc:mysql://master:3306/source?use ...

  3. DOC命令学习(一)

    DOC命令学习(一) 命令 切换目录命令(cd) cd /d E: 查看目录命令(dir) dir   #查看# 回显命令(echo) @echo offset d = %date:~0,10%set ...

  4. HGD2-LSP选择集专题-网络整理

    [Visual Lisp]图元选择集专题 图元选择集专题 ;;★★★01.选择集操作★★★ (setq ss (ssadd));;创建一个空选择集 (ssadd (car(entsel)) ss);; ...

  5. Android笔记--文本输入

    编辑框EditText 相关内部部件取下: inputType的类型如下: 具体实现: 不同边框的实现: 焦点变更监听器 具体实现: 文本变化监听器 具体实现:

  6. 如何解决 Iterative 半监督训练 在 ASR 训练中难以落地的问题丨RTC Dev Meetup

    前言 「语音处理」是实时互动领域中非常重要的一个场景,在声网发起的「RTC Dev Meetup丨语音处理在实时互动领域的技术实践和应用」活动中,来自微软亚洲研究院.声网.数美科技的技术专家,围绕该话 ...

  7. 在Winform分页控件中集成导出PDF文档的功能

    当前的Winform分页控件中,当前导出的数据一般使用Excel来处理,Excel的文档可以用于后期的数据展示或者批量导入做准备,因此是比较好的输入输出格式.但是有框架的使用客户希望分页控件能够直接导 ...

  8. Redis 缓存雪崩 |击穿 |穿透 概念及解决方案

    一.雪崩 1.概念  指某一时间段,缓存集中过期失效,无数的请求绕开缓存,直接访问数据库. 2.解决方案 让redis数据永不过期,这种方式最可靠的.最安全的,但占用空间,内存消耗大,并且不能保持数据 ...

  9. ArcMap安装OSM路网数据编辑插件ArcGIS Editor for OSM的方法

      本文介绍在ArcGIS下属的ArcMap软件中,ArcGIS Editor for OpenStreetMap这一工具集插件的下载与安装的具体方法.   ArcGIS Editor for Ope ...

  10. uniapp H5图片编辑器(安卓/iOS适用)

    箭头绘制参考了:https://blog.csdn.net/qq_45939676/article/details/127425426 这位大佬的文章 gitee地址: https://gitee.c ...