是否可以选择 Material UI 选择的对象？

Question

这与 Material ui 做出反应，使用 TextField 和 ManuItem 组件构建选择字段。我的代码：

{data.category?.map((category) => (
     <MenuItem
         key={category.id}
         value={{
             id: category.id,
             percentage: category.percentage,
        }}
     >
         {category.name}
     </MenuItem>

[object Object]但给我这个控制台警告：Material-UI：您为选择提供了超出范围的值...

任何想法？

Answer 1

这是因为 TextField 仅接受列表中的值之一。在这种情况下，列表项是对象而不是字符串，因此它们不匹配，因此会出现警告。

这是使用第二种方法的工作代码沙箱（使用对象作为值）

1. 您可以将项目的值更改为字符串，并将 TextField 的值设置为字符串值之一。

          <MenuItem
            key={d.id}
            value={d.name}
          >
   

2. 或者，您必须对 json 对象进行字符串化，因为 HTML 属性无法保存 JSON 对象。因此，它尝试通过在生成“[object Object]”作为其值的对象上使用 toString() 方法来生成有效的字符串。因此，如果您对对象进行字符串化，您的列表项将具有整个对象的字符串化值（请注意，如果对象非常大，这可能不是最佳方法）。

          <MenuItem
            key={d.id}
            value={JSON.stringify({
              id: d.id,
              percentage: d.percentage,
              name: d.name
            })}
          >
   

并将 value 属性添加到 TextField

      <TextField
        id="outlined-select"
        select
        required
        label="Select"
        variant="outlined"
        onChange={handleChange}
        helperText="Please select a value"
        InputLabelProps={{
          shrink: true
        }}
        value={selectState || ""} // THIS IS NEEDED
        defaultValue={""}
      >