MUI 选择对象（MUI：您提供了超出范围的值）

Question

我想为对象列表设置 MUI 选择 ([{name: "", id: "" }])。

选择列表应该显示对象的名称和id，选择的值应该只显示名称。最重要的部分是我想 return 在 onChange-handler 中选择带有 id 和 name 的对象。

我基本上已经得到了我想要的解决方案，但我无法摆脱“你提供了一个超出范围的值……”的警告。有没有办法解决这个问题，或者我应该 ignore/disable 这个警告？

找到组件的代码和框示例here

Answer 1

发生这种情况是因为您将 MenuItem 上的值设置为完整对象，而将值传递给 Select 只是一个字符串。将您的 MenuItem 更改为：

<MenuItem key={el.id} value={el.id}>

和 Select 到此：

 <Select
          value={entityForm.entity.id}

您还需要更新句柄表单代码，但这会处理该警告。

编辑更新答案以使用 id 而不是 name

MUI Selection of an Object (MUI: You have provided an out-of-range value)