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. vue router相关用法

    router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之 ...

  2. python框架之Django(4)-视图&路由

    视图 负责接收请求和返回响应 FBV和CBV FBV FBV(function base views) 就是在视图里使用函数处理请求. from django.conf.urls import url ...

  3. python自动类型转换(针对于Number数据类型来的)精度从低到高 bool->int-> float->complex 当两个不同是数据类型运算时候,默认想更高进度转化

    # ### 自动类型转换(针对于Number数据类型来的) ''' 精度从低到高 bool->int-> float->complex 当两个不同是数据类型运算时候,默认想更高进度转 ...

  4. TensorFlow(1)注解入门代码

    学习当然要从官方的入门文档开始. 但是这篇入门对于从0开始的初学者似乎有些困难,尤其是对于神经网络知识还是一知半解的. 敲完理解一遍还是懵逼. TensorFlow经典入门代码学习备注如下. impo ...

  5. java Quartz定时器任务与Spring 的实现

    1.xml配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http:/ ...

  6. Mybatis(二)总结

    1. 输入映射(就是映射文件中可以传入哪些参数类型) 1)基本类型 2)pojo类型 3)Vo类型2. 输出映射(返回的结果集可以有哪些类型) 1)基本类型 2)pojo类型 3)List类型3. 动 ...

  7. C#文件流的读写

    1.文件流写入的一般步骤 1.定义一个写文件流 2.定义一个要写入的字符串 3.完成字符串转byte数组 4.把字节数组写入指定路径的文件 5.关闭文件流 2.文件流读入的一般步骤 1.定义一个读文件 ...

  8. Spring Cloud配置中心(Config)

    Spring Cloud配置中心(Config) Spring Cloud是现在流行的分布式服务框架,它提供了很多有用的组件.比如:配置中心.Eureka服务发现. 消息总线.熔断机制等. 配置中心在 ...

  9. IP通信基础学习第二周

    此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...

  10. 进程间通信之信号量、消息队列、共享内存(system v的shm和mmap)+信号signal

    进程间通信方式有:System v unix提供3种进程间通信IPC:信号量.消息队列.共享内存.此外,传统方法:信号.管道.socket套接字. [注意上述6种方式只能用户层进程间通信.内核内部有类 ...