当我有唯一键时，为什么会收到唯一键道具警告？答案

【问题标题】：Why am i getting a unique key prop warning when i have a unique key?当我有唯一键时，为什么会收到唯一键道具警告？
【发布时间】：2018-12-11 10:56:39
【问题描述】：

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 未呈现联系人。任何帮助将不胜感激。提前致谢

【问题讨论】：

'=' 后的换行符无效恕我直言
那行不通。我仍然收到警告
可以分享联系人数组吗？也许有相同的user_id（甚至可能是未定义的）

标签： javascript reactjs

【解决方案1】：

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

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

不管该警告如何，dom 都应该呈现为警告而不是错误。因此，对于不渲染 dom 可能还有其他一些问题，例如用户组件没有返回任何东西或类似的明智......

我在本地尝试共享侧边栏组件，效果很好。如果问题有解决办法，就很容易找出根本原因。

【讨论】：

【解决方案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;

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

是的，id 已重复。我找到并删除了它。谢谢各位！！！

【讨论】：