https://stackoverflow.com/questions/48266018/missing-key-prop-for-element-reactjs-and-typescript

When rendering an array of elements, React needs a key prop (1) to identify elements and optimize things.

Add key={topic.id} to your element in jsx:

return (
<div>
<h2>Results List</h2>
{topics.map((topic: any) =>
<div className="panel panel-default" key={topic.id}>
<div className="panel-heading">{topic.name}</div>
<div className="panel-body">{topic.description}</div>
</div>
)}
</div>
);

REACT Missing “key” prop for element的更多相关文章

  1. React之key详解

    一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码 ...

  2. Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

    Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key. 1.rea ...

  3. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  4. React报错之JSX element type does not have any construct or call signatures

    正文从这开始~ 总览 当我们试图将元素或react组件作为属性传递给另一个组件,但是属性的类型声明错误时,会产生"JSX element type does not have any con ...

  5. pytorch错误:Missing key(s) in state_dict、Unexpected key(s) in state_dict解决

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 在模型训练时加上: model = nn.DataParallel(model)cudnn.bench ...

  6. React中key的必要性与使用

    React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图.更新的过程是由数据驱动的,新 ...

  7. react中key值的理解

    react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据 ...

  8. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  9. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

随机推荐

  1. Navicat 远程连接 Oracle11g 数据库报错 No listener 的问题

    1.首先确认已经启动 OracleOraDb11g_home1TNSListener 服务时,仍无法连接:   2.进入计算机系统属性中查看 Oracle 服务端计算机的全名:   3.进入 Orac ...

  2. Mysql数据库配置参数详解大全

    名称 是否需要重启 值 允许值 描述 auto_increment_increment 否 1 1-65,535 auto_increment_increment和auto_increment_off ...

  3. 选择排序(Python实现)

    目录 1. for版本--选择排序 2. while版本--选择排序 3.测试用例 4. 算法时间复杂度分析 1. for版本--选择排序 def select_sort_for(a_list): ' ...

  4. 【Tools】-NO.89.Tools.4.Visual Studio 2017.1.001-【Visual Studio 2017 安装与卸载】-

    1.0.0 Summary Tittle:[Tools]-NO.89.Tools.4.Visual Studio 2017.1.001-[Visual Studio 2017 安装与卸载]- Styl ...

  5. TP连接数据库报错:SQLSTATE[HY000] [2002] No such file or directory

     连接数据库报错:“SQLSTATE[HY000] [2002] No such file or directory”. 出现这个问题的原因是PDO无法找到mysql.sock或者mysqld.soc ...

  6. Filte过滤器

    过滤器 , 其实就是对客户端发出来的请求进行过滤. 浏览器发出, 然后服务器派servlet处理.  在中间就可以过滤, 其实过滤器起到的是拦截的作用.生活中的过滤器例如:门禁,你有门卡才能过去,没有 ...

  7. Python记录14:面向对象编程 类和对象

    '''现在主流的编程思想有两种,一种是面向对象,一种是面向过程面向过程编程 核心是过程二字,过程指的是解决问题的步骤,即先干什么.再干什么.最后干什么... 基于该思想编写程序就好比再设计一条流水线, ...

  8. AD域与外部网站域名相同处理办法

    环境 域控:Windows Server 2008 r2 AD域:example.cn 问题:DNS可以正常解析外部域名(如www.baidu.com),但是无法解析mail.example.cn 原 ...

  9. Lucky 7 (容斥原理 + 中国剩余定理)

    题意:求满足7的倍数,不满足其他条件num % p == a 的num的个数. 思路:利用中国剩余定理我i们可以求出7的倍数,但是多算了不满足约定条件又得减去一个,但是又发现多减了,又得加回来.如此, ...

  10. Flask最强攻略 - 跟DragonFire学Flask - 第十四篇 Flask-SQLAlchemy

    前不久刚刚认识过了SQLAlchemy,点击这里复习一下 当 Flask 与 SQLAlchemy 发生火花会怎么样呢? Flask-SQLAlchemy就这么诞生了 首先要先安装一下Flask-SQ ...