加了key为何还报Each child in a list should have a unique “key“ prop

最新推荐文章于 2024-04-29 12:45:49 发布

cautionHua

最新推荐文章于 2024-04-29 12:45:49 发布

阅读量1.8k

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/cautionhua/article/details/121976875

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在React应用中遇到一个警告：每个列表子元素都需要一个唯一的'key'属性。问题出在使用map函数创建的元素上，原本在React.Fragment中添加了key属性，但发现空的React.Fragment标签可能导致此警告。解决方案是删除空的React.Fragment或者为它提供一个key。修复这个问题后，警告消失。

摘要由CSDN通过智能技术生成

devScripts.js:5836 Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information
in Fragment
in Unknown (created by Context.Consumer)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in main (created by Basic)
in Basic (created by Content)

我的代码结构：

manageTypeList.map((item: manageTypeResponseType, index: number)=>(<>
    <div className="h_p_m_content_item" key={index}></div>
</>))

在浏览器中找了不少都是说没有key的错误，但是我已经在代码中加了一个key，索性就直接看自己的代码以及报错信息了，突然想到加了一个空的标签<></>，其实这个空标签是一个React.Fragment的一个语法糖，可以加上一个key的属性，于是我就将这个<></>移除就没有报错了！也可以在<></>上加一个key。