列表中的每个子项都应有一个唯一的“key”道具控制台警告[重复]
代码在这里
<React.Fragment>
<div className="js-container">
<div className="js-sidecontent">
{[{ title: "Js, values: ["s1", "s2"]}].map((f_list) => (
<div className="js-sidecontent-container" key={f_list.title}>
<button className="feature-title">{f_list.title}</button>
{f_list.values.map((f_list_value) => (
<button className="feature-title-list">{f_list_value}</button>
))}
</div>
))}
</div>
</div>
</React.Fragment>
我在React Component的渲染方法中有上面的代码，并且我有key-value作为父div元素的属性。
警告：列表中的每个孩子都应该有一个唯一的“钥匙”道具。
如何解决？
共有2个答案
您可以使用如下代码进行修复：
{f_list.values.map((f_list_value, index) => (
<button className="feature-title-list" key={index}>{f_list_value}</button>
))}
如果渲染元素列表，则必须添加额外的属性键。此属性唯一标识元素。
您还需要为按钮指定一个键：
{f_list.values.map((f_list_value, idx) => (
<button className="feature-title-list" key={idx}>{f_list_value}</button>
))}
-
我正在使用Nextjs开发一个电子商务网站，并正在查看myCart页面（订购物品列表） 代码为'http://localhost:5000/myCart'如下所示：myCart页面 我在导航栏中有一个购物车图标。当我点击它时，我被导航到我的购物车页面。已排序的列表将正确显示。但是在Dev工具中检查控制台时，我看到下面给出的警告。 同样，当我点击购物车图标时，页面会刷新并正确显示。此时，浏览器读取h
-
得到一个警告：列表中的每个孩子都应该有一个唯一的“键”道具。我想不出我需要用哪把钥匙。 我红了反应指南，但它不能帮助我理解如何在我的情况下使用它
-
向整个社区问好。 我正在做一个项目，在这个项目中，我所在城市的餐馆可以通过这个应用程序放置他们的菜肴并生成订单。 但是我在执行项目时遇到了一个错误。 这就是我犯的错误。 我正在用React本地做我的前端项目。 **我的代码是这个-我的前端** 应用程序。js 餐食 创建一个调用Flatlist操作的列表，并管理列表中的信息。 列表js 获取我的项目的url。 UseFecth.js 我的modal
-
我一直在调试这个，开始掉头发。到目前为止，我还没有找到解决办法。这是组件。我最初是为组件编写测试的，但是由于样式化的组件，它出现了一些错误，所以我的技术负责人告诉我为这个新的组件（这是组件中的新组件）编写测试，因为它可能有一些效果。运行<代码>摘要时。测验tsx我收到此错误（与钥匙相关）： 我的挑逗测试： 我的戏弄组件：
-
问题内容： 我正在使用Google Books API构建应用，并且似乎正在向列表中的每个孩子传递唯一键，但是错误不会消失。我一定在做错事，但不确定。 请注意，在返回const books之后，我有一个console.log（book.id），它将在控制台中显示所有10个唯一的id键。但是，当我尝试使用key = {book.id}将其传递给该组件的子组件时，会出现此错误。 问题答案： 在需要去最
-
我正在使用GoogleBooksAPI构建一个应用程序，我似乎正在向列表中的每个孩子传递一个唯一的密钥，但错误不会消失。我一定是做错了什么，但我不知道是什么。 注意，在const books中返回后，我有一个控制台。日志（book.id），它将在控制台中显示所有10个唯一的id键。但是当我试图使用key={book.id}将它传递给这个组件的子组件时，我得到了这个错误。