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. mac安装mysql5.6默认密码修改

    前言: 每次安装mysql都被烦的要死,痛并思痛记下此篇文章: 参考: https://blog.csdn.net/u010377383/article/details/82688250 https: ...

  2. 解决idea单元测试@RunWith没有提示

    换成idea有一个月了,很多功能慢慢熟悉,今天想测试一下web程序 @RunWith没有提示查看一下原来是 scope 作用域 idea上不支持

  3. MQ(部署模式)

    MQ部署模式 1.master-slave部署模式 1)shared filesystem Master-Slave部署方式 主要是通过共享存储目录来实现master和slave的热备,所有的Acti ...

  4. ASM1117脚位图

  5. python pandas库总结-数据分析和操作工具

    参考:https://pandas.pydata.org/ Input/output相关函数 pandas.read_excel-将Excel文件读入pandas数据框 支持读取xls, xlsx, ...

  6. 对于如何在IDEA中给Terminal添加git的详解

    具体步骤 1.配置本机环境变量 进入到环境变量的设置界面,然后找到下面的Path变量,双击点开: 然后新建一个变量,路径定义到git的目录下面的bin目录下: 2.WIN+R,然后输入cmd,进入终端 ...

  7. Android studio的基本使用--基础篇

    一.新建项目 其实跟IDEA新建项目的流程基本一致,File->New->New project,这样就能够新建出来一个项目啦! 一般情况下,我们都会选择Empty Activity,之后 ...

  8. Spring--事务案例的实现

    案例实现(主要是想用Spring实现一下MyBatis的相关内容) JDBCConfig.java MyBatisConfig.java SpringConfig.java accountDao.ja ...

  9. Spring--第三方bean管理

    第三方bean管理 管理第三方的bean的话,是不能在配置文件里面写这个注解的: 他表示的是,扫描你当前文件里面的bean,是可以直接获取到的. 那么,对于第三方的bean,我们可以这么做: 在配置文 ...

  10. Linux常用命令 备查

    区分关系: 有很多类型的shell,最常见的一种Shell是bash env 查看所有环境变量 用echo查看环境变量 echo $LOGNAME echo $PATH https://shimo.i ...