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需要通过函数返回 ...
随机推荐
- form表单 css的选择器和一些属性以及盒子模型,浮动
form表单 <form action='' method='' enctype=''> <input type='text'> input:更下type属性就可以得到对应的效 ...
- 网络数据请求get&post
- 无法将类 org.example.sh.utils.PageInfo<T>中的构造器 PageInfo应用到给定类型;
是因为没有在工具类中加入构造器, @Data @NoArgsConstructor @AllArgsConstructor @ToString
- 有关C++数据结构
1.临时变量的访问速度远远大于成员变量. 2.C++中唯一一种函数返回值可以做左值的就是引用,本质上也是指针. 3.成员函数末尾加const,表示只读成员函数,不能修改成员变量的值.只读成员函数仅仅用 ...
- json提取器通过多条件筛选提取ID
可能在某些列表中如名称会有重复,此时就需要使用多个搜索条件来判定唯一性 $.data.[?(@.tymc=="测试测试")].[?(@.plat_merchandise_id==& ...
- 安装Win11需要网络才能下一步怎么跳过
1.先Shift+F10打开命令提示符 2.运行C:\Windows\System32\oobe\BypassNRO.cmd 3.自动重启来到联网这一步,多了一个没有网络的选项,进入.
- MIUI 12.5稳定版关闭充电提示音的方法
手机开启开发中模式 将手机连接电脑 打开cmd, 输入命令:adb shell settings put global power_sounds_enabled 0,即可关闭充电时的提示音 输入命令: ...
- 修改/编辑jar包
替换或者导入jar包时,jar包被自动压缩,springboot规定嵌套的jar包不能在被压缩的情况下存储. 解决(本文以升级ojdbc包为例): 使用jar命令解压jar包,在压缩包外重新替换jar ...
- 在VS中C#工程操作Mysql数据库
1.实现mysql数据库与VS的连接,需要安装两个插件,作者装的是mysql-connector-net-6.9.9.msi和 mysql-for-visualstudio-1.2.6.msi. 2. ...
- CentOS7更改阿里源
阿里云yum源:1)备份当前yum源防止出现意外还可以还原回来cd /etc/yum.repos.d/cp /CentOS-Base.repo /CentOS-Base-repo.bak2)使用wge ...