当我有一把独特的钥匙时，为什么我会收到一个独特的钥匙道具警告

Question

import React from 'react';
import User from '../containers/User';
import './Sidebar.css';

const Sidebar = ({ contacts }) => {
return(
<aside className="Sidebar">
{contacts.map(contact => <User user={contact} key= 
{contact.user_id} /> )}
</aside>
);
};
export default Sidebar;

我有一个用户的密钥，但我仍然收到这个警告，并且dom没有呈现联系人。如有任何帮助，我们将不胜感激。提前感谢

Answer 1

我在发布的关于密钥的代码中没有看到任何错误。

但是，在联系人中传递的user_id本身可能是重复的，因此可能会出现唯一的密钥警告。

不管该警告如何，dom都应该被呈现为警告而不是错误。因此，如果不渲染dom，可能会出现其他一些问题，比如用户组件没有返回任何内容或类似的wise。。

我在本地尝试了共享边栏组件，效果很好。如果有人为造成这个问题，那么就很容易找出根本原因。

Answer 2

使用您的代码检查这个工作示例。希望能有所帮助。

https://codesandbox.io/s/5w5v287lj4

import React from "react";
import User from "./User";
const Sidebar = ({ contacts }) => {
return (
<div>
{contacts.map(contact => (
<User user={contact} key={contact.id} />
))}
</div>
);
};

导出默认边栏；

<Sidebar contacts={contacts} />
import React from "react";
const User = ({ user }) => {
return <div>{user.id}</div>;
};
export default User;

Answer 3

正如人们所说，您的一个userId很可能是重复的。

为了摆脱警告，你可以以不同的方式构建密钥(但随后你会失去一些反应优化(

import React from 'react'
import User from '../containers/User'
import './Sidebar.css'
const Sidebar = ({ contacts }) => {
return(
<aside className="Sidebar">
{contacts.map((contact, index) => <User user={contact} key={`${index}-${contact.user_id}`} />)}
</aside>
)
}
export default Sidebar

Answer 4

是的，id重复了。我找到并扔掉了它。谢谢你们！！！