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. python openpyxl 多个sheet vlookup

    import pandas as pdimport openpyxlfrom openpyxl.styles import Border, Side,colorswb = openpyxl.load_ ...

  2. python 每天一个知识点 对文件的操作

    对文件的操作: 操作 功能 文件对象 = open(file,mode,encoding) 打开文件获取文件对象 文件对象.read(num) 读取指定长度字节,不指定num读取文件全部 文件对象.r ...

  3. (粗糙版)DeptDao,Service

    DeptDao package com.javasm.dao; import com.javasm.bean.Dept; import com.javasm.util.JDBCUtils; impor ...

  4. C++初识指针之一

    新手学习C/C++都跳不过去的地方,就是指针,用的话,确实好用,但是概念比较绕, 指针的通俗说法 1.简单的来说,就是说每一个变量,在电脑内都占一个地方,这个地方用一个16进掉的编号来进行标记,类似于 ...

  5. 错误:为仓库 'appstream' 下载元数据失败 : Cannot prepare internal mirrorlist: No URLs in mirrorlist

    sudo sed -i -e "s|mirrorlist=|#mirrorlist=|g" /etc/yum.repos.d/CentOS-* sudo sed -i -e &qu ...

  6. ajax缓存和fiddler——http协议调试代理工具

    1.在ie9下,ajax请求可能会有缓存,需要在请求上一个随机数 如:Math.random(); 2.fiddler2 打开以后可以查看所有的http请求情况,也可以使用本地脚本代替要请求的js文件 ...

  7. Less1-union select 联合查询注入

    在学习之前,我们要知道,什么是 SQL 注入? 一句话来说,攻击者通过注入恶意的SQL命令,破坏SQL查询语句的结构,从而达到执行恶意SQL语句的目的. SQL注入漏洞的危害是很大的,常常会导致整个数 ...

  8. 局部异常因子(Local Outlier Factor, LOF)算法详解及实验

    局部异常因子(Local Outlier Factor, LOF)通过计算样本点的局部相对密度来衡量这个样本点的异常情况,可以算是一类无监督学习算法.下面首先对算法的进行介绍,然后进行实验. LOF算 ...

  9. 泰拉瑞亚EasyBuildMod便捷建造模组开发详细过程

    pre { overflow-y: auto; max-height: 400px } img { max-width: 500px; max-height: 300px } github地址: ht ...

  10. [Volo.Abp升级笔记]使用旧版Api规则替换RESTful Api以兼容老程序

    @ 目录 原理分析 开始改造 更换基类型 重写接口 替换默认规则 在微服务架构中的问题 Volo.Abp 配置应用层自动生成Controller,增删查改服务(CrudAppService)将会以RE ...