资料-ui自动完成重复键警告

Question

我正在通过一个项目使用material，当我试图加载一个更大的联系人列表时，我遇到了一些AutoComplete组件的小问题，有些联系人可能有相同的名称(因为测试数据)，但是ids不同。

1. 将对象作为dataSource项传递时发出警告。我得到一个重复的键警告：“警告:flattenChildren(.)：遇到两个具有相同键的子级”

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

1. 在输入时，呈现速度很慢，因为有时它与许多联系人匹配。理想情况下，我想显示最多5-10个联系人在自动完成，但这是不可能的。(这一特性似乎已经为公关所接受，还是？)

谢谢,

Answer 1

例如，有时在mui自动完成中有具有相同显示属性的记录。在用户列表中，两个用户可能具有相同的名称。mui基于该属性生成一个密钥，这样您就可以得到重复的密钥。

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

使用renderOption属性

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

Answer 2

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

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

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