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的更多相关文章

  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. 第三章 excel的表合并

    本章内容比较简略,基于行或列进行统计运算 具体操作为:选中某一空白单元格,单击数据--数据工具--合并计算(依据需求选择数据与计算方式)

  2. [.Net]Framwork WebAPI添加接口请求监控

    思路: 通过重写 ActionFilterAttribute 拦截Action的请求及返回信息,实现对接口请求的监听. 最终效果如下: 全局启用需配置如下: 局部启用需配置如下: 源码如下: 1 // ...

  3. DVWA-SQL Injection (Bind) SQL盲注

    盲注同于union select查询注入,盲注只能得到数据库回显的正确和错误,利用返回的正确和错误一个一个判断. LOW 审计源码 <?php if( isset( $_GET[ 'Submit ...

  4. Javaweb学习笔记第五弹

    preparedStatement 防止SQL注入:将敏感字符进行转义 1.获取PreparedStatement对象 String sql="selct * from 表名 where 列 ...

  5. URule规则引擎

    没有规则,不成方圆: 一.背景 前段时间,在做项目重构的时候,遇到很多地方需要做很多的条件判断.当然可以用很多的if-else判断去解决,但是当时也不清楚怎么回事,就想玩点别的.于是乎,就去调研了规则 ...

  6. 基于PaddleOCR的多视角集装箱箱号检测识别

    基于PaddleOCR的多视角集装箱箱号检测识别 一.项目介绍 集装箱号是指装运出口货物集装箱的箱号,填写托运单时必填此项.标准箱号构成基本概念:采用ISO6346(1995)标准 标准集装箱箱号由1 ...

  7. IO 与 NIO之网络通信

    一.阻塞IO / 非阻塞NIO 阻塞IO:当一条线程执行 read() 或者 write() 方法时,这条线程会一直阻塞直到读取到了一些数据或者要写出去的数据已经全部写出,在这期间这条线程不能做任何其 ...

  8. Gateway 网关

    Spring Cloud Gateway 作为 Spring Cloud框架的第二代网关,在功能上要比 Zuul更加的强大,性能也更好.随着 Spring Cloud的版本迭代,Spring Clou ...

  9. diyudio 3886 功放机鉴赏

  10. 【事故】记一次意外把企业项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私

    前言 缘由 在一个月黑风高的夜晚,正准备休息的我突然接到之前外包老总的亲切问候.一顿输出才知道三年前为了搭建流程化部署,将甲方的测试代码放到github上后忘记删除.现在被甲方的代码扫描机制扫到,并且 ...