material-ui自动完成重复键警告

Question

我正在通过项目使用material-ui，当我尝试加载更大的联系人列表时，我遇到了一些AutoComplete组件的小问题，某些联系人可能具有相同的名称（因为测试数据），但是不同的ID

1. 将对象作为dataSource项传递时发出警告。我收到一个重复的密钥警告：＆＃34;警告：flattenChildren（...）：遇到两个孩子用相同的密钥＆＃34;

    {
      contact,
      key: index,
      text: FullName,
      value: <MenuItem key={index} primaryText={item} />
    }

1. 键入渲染时速度很慢，因为有时它会匹配很多联系人。理想情况下，我想在自动完成中显示最多5-10个联系人，但这还不可能。 （该功能似乎已经在PR中被接受，或者？）

谢谢，

Answer 1

要删除重复键警告，text属性必须是唯一的，因为这是用于创建React ID的内容。

最好的办法是将'text'字段设置为index或某个ID。假设FullName存储在一个数组中。然后，您可以使用索引查找相应的名称。如果FullNames位于对象/词典中，则可以使用ID检索FullName。

当用户单击某个菜单项并且AutoComplete组件的值不是您要向用户显示的值时，您可以使用onNewRequest事件动态设置该属性。