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需要通过函数返回 ...
随机推荐
- windows环境下本地项目(或gitlab上拉取项目)在Jenkins上自动打包部署 超超超详细!!!!!
一.环境准备 1.下载jdk,官网:http://www.oracle.com/ 2.下载Jenkins,官网:https://www.jenkins.io/ 3.下载Tomcat,官网:http:/ ...
- Windows10安装UR_RTDE
------------恢复内容开始------------ 要使用UR_RTDE必须先配置电脑环境,目前使用的环境是电脑win10,配置环境需要VS2019+boost1_66_0+cmake2.3 ...
- 使用IDEA的webservice工具解析生成的客户端调用远程接口
由于这个接口的报文格式比较麻烦,是XML的请求头加上JSON格式的请求体,所以看起来比较复杂,也可以用RPC的方式调用,那样需要将请求头和请求体,响应头和响应体建实体.public JSONObjec ...
- PHP 合并两个二维数组
思路:遍历二维数组,合并两个二维数组的值,赋值给新数组 function mergeArray($arr1,$arr2){ $newArr = []; foreach($arr1 as $v1){ f ...
- vue3.0知识整理与总结
在性能方面,对比Vue2.x,性能提升了1.3~2倍左右:打包后的体积也更小了. 非兼容的功能 一些和Vue2.x版本改动较大的语法,在Vue3存在兼容问题 v-modal 组件通信 v-for ...
- PYCHARM开源版-免费版本
下载地址:https://www.jetbrains.com/pycharm/download/#section=windows 亲测可以使用,不需要任何破解工具
- 《MySQL是怎样运行的》第四章小结
- sqli-labs搭建
今天使用 phpstudy 搭建了 sqli-labs 练习 SQL 注入平台,其中遇到了两个问题. phpstudy phpstudy 中集成了 Apache.Nginx.PHP.Mysql.php ...
- Java学习小总结它又又又又来啦!
又到了输出总结的时候啦,话不多说,直接开始输出! 一.final final修饰符的主要作用就是强调它所修饰的板块的"最后"性: 若是修饰成员方法:那么成员方法不可以再被重写: 若 ...
- Javaweb实践复习--MyBatis
增删改查操作 查询 查询所有数据 1.编写接口方法:Mapper接口------参数:无------结果:List 2.编写sql语句:SQL映射文件 一般情况下,若是用户实体类里面的变量名称与数据库 ...