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>
              );
            }}