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

Question

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

1. 将对象作为数据源项传递时发出警告。我收到重复键警告：“警告：flattenChildren(...)：遇到两个使用相同键的孩子”

    {
      contact,
      key: index,
      text: FullName,
      value: &ltMenuItem key={index} primaryText={item} /&gt
    }

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

谢谢，

Answer 1

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

最好的办法是将“文本”字段设置为index 或某个ID。假设FullNames 存储在一个数组中。然后，您可以使用索引来查找相应的名称。如果全名在对象/字典中，您可以改为使用 ID 检索 FullNames。

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