javascript - Material-UI：是否可以通过 MenuItem 发送对象？

Question

我正在尝试{ language: "english", code: "en" }通过 MUI发送对象<MenuItem />。如果有办法成功实现这一点？它可以为我节省大量在为语言分配代码的过程中创建大量 switch 语句的忙碌工作。

与我一起尝试将对象作为第一个选择传递的当前实现：

        <FormControlSelection variant="outlined">
          <InputLabel id="select-language">Language</InputLabel>
          <Select
            labelId="select-language"
            value={lesson.language.language}
            name="language"
            label="Language"
            onChange={handleLanguage}
          >
            <MenuItem value={{ language: "english", code: "en" }}>
              English
            </MenuItem>
            <MenuItem value={"italian"}>Italian</MenuItem>
            <MenuItem value={"spanish"}>Spanish</MenuItem>
          </Select>
          <FormHelperText>What language is the file in?</FormHelperText>
        </FormControlSelection>

不幸的是，当我尝试实施上面提供的解决方案时，我在控制台中收到以下警告：

undefinedMaterial-UI：您为 select (name="language") 组件提供了超出范围的值。考虑提供与可用选项之一或“”匹配的值。可用值为“[object Object]”、“italian”、“spanish”。

在此示例中，该值确实达到了我的状态...我已经成功地为语言更新了对象...但是我的输入显示为空选择，如下所示...

有什么想法吗？

标签： javascriptreactjsmaterial-ui