材质 UI 选择 - 对象作为值失败

Question

在我的应用程序中，我使用 Material UI 和 React。我创建了一个选择下拉列表以更改显示的值。因此，当我更改选择时，页面上的数据应该更新。不幸的是，我无法将我的对象添加到 MenuItem 的 value 属性。在 CodeSandbox 中，它正在使用带下划线的值，但在我的本地环境中则不然。

代码： https: //codesandbox.io/s/select-exmpl-iosfg

本地错误：

Answer 1

正如聊天中所讨论的，这应该可行。

<Select
  value={plant}
  onChange={handleSelectChange}
  defaultValue={plant}
  displayEmpty
>
  {plants.map((tmpPlant) => (
    //@ts-ignore - necessary to load object into value
    <MenuItem value={tmpPlant}>{tmpPlant.id}</MenuItem>
  ))}
</Select>;

此外，最好在 MenuItem 内的地图函数中添加一个 key prop，如下所示key={tmpPlant.id}