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. 【NAS使用心得】使用Synology Photos管理照片

    整理方式 1.本地没有整理或只按年份整理的:时间线模式下直接上传,让软件自己按照片创建时间生成文件夹:有按年份生成相册需求的,可以用"选择照片以创建相册"功能,找到年份文件夹,全选 ...

  2. [C#] Func及Action的快速Demo

    参考代码1: using System;using System.Collections.Generic;using System.Linq;namespace FuncActionDemo{    ...

  3. VBA类模块完全教程(www.accessoft.com软件网)

    这份礼物送给现在想学习类知识或曾经学过但因为各种原因没有"修成正果"的朋友,我期望的结果是这篇文章后,您可以在类模块中像在标准模块中写代码一样熟练,我也期望不至于太乏味而使您没有耐 ...

  4. CSS3之动画三大特性

    一 过渡模块 1 基本使用 1,过渡三要素1.1必须要有属性发生变化1.2必须告诉系统哪个属性需要执行过渡效果1.3必须告诉系统过渡效果持续时长 2.注意点当多个属性需要同时执行过渡效果时用逗号隔开即 ...

  5. GO语言http请求方法,可以携带请求头Header与cookie

    1.目录 2.main.go package main import "fmt" import "demo/common/http" func main() { ...

  6. Matlab:读取、写入(.txt)(.xlsx)

    写入txt a=[1,2,3;4,5,6]; save C:\Users\Administrator\Desktop\a.txt -ascii a 参考:https://blog.csdn.net/h ...

  7. week3题解

    1.寄包柜 看到题目最容易想到开二位数组 但数据量过大,因此需要map #include <bits/stdc++.h> using namespace std; map<int,m ...

  8. 新搭建的禅道admin忘记密码

    /opt/zbox/run/mysql/mysql -uroot -p 禅道数据库root默认密码123456 MariaDB [(none)]> show databases; +------ ...

  9. 21206134-赵景涛-第三次blog总结

    一.前言: 本次Blog是对之前发布的PTA题目集的总结性Blog,这几次的作业题量,难度都不大,但都趋近于完成一整个系统,而非只实现部分的功能.题目集九.十也不在给出类图,而是要求自己设计.我认为这 ...

  10. group by和union,Laravel分页

    $res3 = DB::table('users') ->join('user_folow_boutiques', 'user_folow_boutiques.user_id', '=', 'u ...