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. 线程 学习教程(一): Java中终止(销毁)线程的方法

    结束线程有以下三种方法:(1)设置退出标志,使线程正常退出,也就是当run()方法完成后线程终止 (2)使用interrupt()方法中断线程 (3)使用stop方法强行终止线程(不推荐使用,Thre ...

  2. C++提供的四种新式转换--const_cast dynamic_cast reinterpret_cast static_cast

    关于强制类型转换的问题,许多书都讨论过,写的最具体的是C++之父的<C++的设计和演化>. 最好的解决方法就是不要使用C风格的强制类型转换,而是使用标准C++的类型转换符:static_c ...

  3. Spring Security 安全验证

    摘自:https://www.cnblogs.com/shiyu404/p/6530894.html 这篇文章是对Spring Security的Authentication模块进行一个初步的概念了解 ...

  4. js根据年月得到当前这个月总共有多少天

    let curmonth; var curDay=this.getday(this.year,this.month); if(this.month >=10) { var curDate = t ...

  5. 安装和使用ZFS

    一.安装和使用ZFS Centos7上安装和使用ZFS:https://blog.csdn.net/linuxnews/article/details/51286358

  6. Python Async/Await入门指南

    转自:https://zhuanlan.zhihu.com/p/27258289 本文将会讲述Python 3.5之后出现的async/await的使用方法,以及它们的一些使用目的,如果错误,欢迎指正 ...

  7. windows10系统下安装pygame

    1.安装python,选择版本3.7.1 下载地址:https://www.python.org/downloads/windows/选择安装版本 2.安装pip 下载地址:https://pypi. ...

  8. fiddler学习总结--autoresponder替换资源

    意义:替换服务器返回的内容 1.找到需要替换的目标 2.选择目标后,点击“autoresponder”-->”add  rules” 3.在下图中,选择“find a file”,再选择需要替换 ...

  9. percona-toolkit工具的使用

    percona-toolkit是一组高级命令行工具的集合,可以查看当前服务的摘要信息,磁盘检测,分析慢查询日志,查找重复索引,实现表同步等等 percona-toolkit 源自 Maatkit 和 ...

  10. mybites

    [mybatis-spring] http://www.mybatis.org/spring/zh/index.html 使用spring mybatis 中间件 方便使用 mybatis [myba ...