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

原因:Dom在渲染数组时,需要一个key,不然嵌套数组时会引起歧义
解决:
1 <div className="classlist-contaier">
2 {this.state.classList.map((item, index) => {
3 return <ClassItem key={index}/>;
4 })}
5 </div>
另外,如果遍历添加组件时,在组件外再加个div之类的容器,那么key需要在上层添加。比如:
1 <div className="classlist-contaier">
2 {this.state.classList.map((item, index) => {
3 return (
4 <div key={index}>
5 <ClassItem/>
6 </div>
7 );
8 })}
9 </div>
react异常 Each child in a list should have a unique “key” prop的更多相关文章
- Each child in an array or iterator should have a unique "key" prop. Check the render method of `CreditCategoryModal`
参考地址:http://f00sun.com/category/react
- 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 ...
- REACT Missing “key” prop for element
https://stackoverflow.com/questions/48266018/missing-key-prop-for-element-reactjs-and-typescript Whe ...
- [React Fundamentals] Accessing Child Properties
When you're building your React components, you'll probably want to access child properties of the m ...
- [React] React Fundamentals: Accessing Child Properties
When you're building your React components, you'll probably want to access child properties of the m ...
- 封装一个处理 react 异常的最简 ErrorBoundary 组件 🎅
前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址. 错误边界避免一个组件错误导致整个页面 ...
- 异常-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 ...
- 写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么
怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...
- 解决React路由跳转时出现的红色警告: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
一.报警如图: 二.查找路由版本 我使用路由版本是4.3.1的,然后我测试所有4.0+版本都会出现以上警告. 三.未解决前的代码 三.我又解读了一下报警告内容的大致意思:就是props需要通过函数返回 ...
随机推荐
- HTTP 协议相关
一. HTTP常见请求头 1. Host (主机和端口号) 2. Connection (连接类型) 3.Upgrade-Insecure-Requests (升级为HTTPS请求) 4. User- ...
- git-bash打开自动执行某条命令的快捷方式创建
"C:\Program Files\Git\git-bash.exe" -c "npm run dev" 创建一个快捷方式,在目标里面加上以上参数,然后运行. ...
- StoneDB 子查询优化
StoneDB 子查询优化 摘要: 说明如何优化 exists 的 join 查询优化器的处理 核心函数: TwoDimensionalJoiner::ChooseJoinAlgorithm Join ...
- Python项目案例开发从入门到实战-1.2 Python语法基础
书籍信息 1.2 Python语法基础 1.2.1 Python数据类型 数值类型 整型(int):浮点型(float):复数(complex),以j或J结尾,如2+3j 字符串 布尔类型 空值,用N ...
- 发布jar包到远程仓库 (maven deploy)
背景: 项目有开放服务模块,现有个需求,需要把开放服务提供成一个jar包,用户可以直接对接. 流程: 1.在pom.xml文件添加distributionManagement节点,将项目打包上传到私服 ...
- 字符集编码cp936、ANSI、UNICODE、UTF-8、GB2312、GBK、GB18030、DBCS、UCS
一直对字符的各种编码方式懵懵懂懂,什么ANSI.UNICODE.UTF-8.GB2312.GBK.DBCS.UCS--是不是看的很晕,假如您细细的阅读本文你一定可以清晰的理解他们.Let's go! ...
- Spring简介-IOC
目录 1.Spring 1.1.简介 1.2.优点 1.3.组成 1.4.扩展 2.IOC理论推导 1.Spring 1.1.简介 Spring:春天----------->给软件行业带来了春天 ...
- 快速构造Python爬虫请求,有这个网站就够了!
引言 大家好,我是蜡笔小曦. 我们在通过程序向某个网页发起请求时,实际上是模拟浏览器进行http(超文本传输协议)请求,这就要求我们需要按照固定的格式进行代码构造. 一般请求数据分为三部分:请求行.请 ...
- 帮你积累音视频知识,Agora 开发者漫游指南正式启航
"运气是设计的残留物."--John Milton 如果玩过<全面战争:中世纪 II>,或者读过 John Milton 书的人,可能对这句话有印象.我们发现,很多小伙 ...
- Jira使用浅谈篇二
本篇参考:https://university.atlassian.com/student/collection/850385/path/1083901 本篇接上文,上文已经对项目设置了一个基础的配置 ...