"警告：列表中的每个孩子都应该在React（TypeScript）中拥有唯一的"key"prop"
在React（打字脚本）中，我得到：
警告：列表中的每个孩子都应该有一个唯一的“键”道具。检查MyCollection的渲染方法
这是MyCollection：
export default function MyCollection(props:any ) {
let nodes = useSelector((state: any) => state.vpms.norm.nodes);
// let node = useSelector((state: any) => state.vpms.norm.nodes[props.id]);
const groupListAdapter: GroupListAdapter = useGroupList(props);
let items: any = [];
groupListAdapter.itemsIds().forEach((itemId:any) => {items.push(nodes[itemId])});
return (
<>
{items.map(props.render)}
</>
);
}
这就是在父组件中调用它的方式：
export default function App() {
...
const id = (node: any, name: string) => nodes[node.c[name]].id;
return (
{iter(root, 'persons').map((persons: any, index: number) => { return (
<MyCollection id={id(persons, 'coverages')}
render= {(coverages: any, index: number) => (
<Accordion id={coverages.id} isExpanded={true} >
<Grid columns={4} style={{width: "100%"}} >
....../>
...
)
如何获取唯一密钥以避免此警告？请注意，App中的propid是MyCollection中所有项目的单个id。
共有2个答案
映射时，您可以使用索引作为键，如：
list.map((item,index)=>{
return (
<p key={index}>Samle Text</p>
)
})
当像这样映射时，可以获得项的索引
yourArray.map((item, itemIndex) => <SomeComponent key={itemIndex} />);
虽然你真的应该为每一项都有一个唯一的标识符。因为它被认为是React中的反模式。
更多信息在这里：
>
https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/
https://medium.com/@muesingb/why-you-roudnt-use-index-as-the-univery-标识符-of-a-组件在反应-b20c3bfcb786
https://stackoverflow.com/a/52338203/14575901
https://medium.com/@vraa/为什么使用一个索引作为反应中的关键
-
我正在使用Nextjs开发一个电子商务网站，并正在查看myCart页面（订购物品列表） 代码为'http://localhost:5000/myCart'如下所示：myCart页面 我在导航栏中有一个购物车图标。当我点击它时，我被导航到我的购物车页面。已排序的列表将正确显示。但是在Dev工具中检查控制台时，我看到下面给出的警告。 同样，当我点击购物车图标时，页面会刷新并正确显示。此时，浏览器读取h
-
问题内容： 我正在使用Google Books API构建应用，并且似乎正在向列表中的每个孩子传递唯一键，但是错误不会消失。我一定在做错事，但不确定。 请注意，在返回const books之后，我有一个console.log（book.id），它将在控制台中显示所有10个唯一的id键。但是，当我尝试使用key = {book.id}将其传递给该组件的子组件时，会出现此错误。 问题答案： 在需要去最
-
我正在使用GoogleBooksAPI构建一个应用程序，我似乎正在向列表中的每个孩子传递一个唯一的密钥，但错误不会消失。我一定是做错了什么，但我不知道是什么。 注意，在const books中返回后，我有一个控制台。日志（book.id），它将在控制台中显示所有10个唯一的id键。但是当我试图使用key={book.id}将它传递给这个组件的子组件时，我得到了这个错误。
-
在这个简单的React应用程序中，我不明白为什么我会收到以下警告信息： 警告：列表中的每个孩子都应该有一个唯一的“键”道具。 对我来说，似乎我把密钥放在了正确的位置，形式为key={item.login.uuid} 我怎样才能摆脱警告信息？把钥匙放在哪里合适？ 应用程序。js 列表js
-
我对如何创建一个简单的todo应用程序的反应和探索方式还不熟悉。我当前收到错误“警告：列表中的每个孩子都应该有一个唯一的“键”道具。”一切似乎都很好，但我一定是做错了什么。 如果有人能帮上忙，那就br太好了/解释为什么会发生这个错误，那就太好了。
-
我正在构建一个React APP来获取电影，并允许评论他们，还可以投票/率。用户可以对电影进行评论和投票。我所做的是制作一个标记，并使用创建用户可以选择的评分值。 这是代码的一部分： 在选项标记行上，我得到以下错误： 我不知道如何摆脱这一警告，我想有一些建议，也为什么我会得到这一点，以便我可以避免它在未来。 我的代码完全在这里：https://pastebin.com/qvReLYPy