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

Question

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

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

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

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

谢谢，

Answer 1

例如，有时您在 mui 自动完成中的记录具有相同的显示属性。在用户列表中，2 个用户可能具有相同的名称。 mui 根据该属性自动生成一个密钥，以便您获得重复的密钥。

解决方案是自定义密钥。为此，您需要自定义自动完成列表的呈现。

使用 renderOption 属性

       renderOption={(props, option, index) => {
              const key = `listItem-${index}-${option.id}`;
              return (
                <li {...props} key={key}>
                 
                  {option[optionProperty]}
                </li>
              );
            }}

Answer 2

要消除重复键警告，

text

属性必须是唯一的，因为这是用于创建 React ID 的。

最好的办法是将“文本”字段设置为

index

或某个 ID。假设

FullName

存储在数组中。然后就可以使用索引来查找对应的名称。如果 FullNames 在对象/字典中，您可以使用 ID 来检索

FullName

。

当用户单击菜单项并且 AutoComplete 组件的值不是您想要向用户显示的值时，您可以使用

onNewRequest

事件动态设置该属性。

Answer 3

自动完成现在支持 getOptionKey 参数。