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，可能会出现其他一些问题，例如User组件不返回任何内容或类似明智的选择。

我在本地尝试了共享的补充工具栏组件，效果很好。如果这个问题摆弄得很简单，则很容易找出根本原因。

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

是的，这个身份证已经被复制了。我找到并删除了它。谢谢你们！

为什么我拥有唯一钥匙时会收到唯一钥匙道具警告？

4 个答案: