Material UI multi-select 初始值未正确显示

Question

我是 MUI 的新手，在 Select 组件中使用编辑表单和显示数据库中的值时遇到了问题。显示了一些值，但有些值，即使它们在初始值数组中（如果我控制台日志，它们被打印），只是不显示并且它只是随机的，不会在每个新条目上显示 - 所以我假设 select 的行为不正确？（如果我 post 表单，它们会被 post 编辑为值）。我使用相同的形式（除了初始值是空的）来创建并且一切似乎都工作正常。所以主要问题只是一些值没有显示，但是例如，如果我同时 select 然后 post 表格，那么同时的两行将是 post ed（所以我看不到它，甚至看不到它 select）。下面是select代码（由于不同日期有几个相同的select，只显示一个）：

return (...
 <Grid item xs={12}>
            <FormControl sx={{ minWidth: 802.03 }}>
              <InputLabel id="monday_select">Monday times</InputLabel>
              <Select
                labelId="monday_select"
                fullWidth
                id="monday_select"
                value={daysObject.mondayValue}
                multiple
                onChange={handleChangeMultipleMonday}
                input={<OutlinedInput label="Monday times" />}
                MenuProps={MenuProps}
              >
                {daysObject.timeSelectValue.map((time) => (
                  <MenuItem
                    key={time}
                    value={time}
                    style={getStyles(time, daysObject.mondayValue, theme)}
                  >
                    {time}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Grid>
)

const handleChangeMultipleMonday = (
    event: SelectChangeEvent<typeof daysObject.mondayValue>
  ) => {
    const {
      target: { value },
    } = event;
    daysObject.handleMonday(
      typeof value === "string" ? value.split(",") : value
    );
  };
)

daysObject 是一个填充了要传递的道具的对象，因为这是一个步进器形式。它看起来像这样：

const daysObject: IDaysObject = {
   timeSelectValue: timeInterv,
   mondayValue: mondayInterval,
   handleMonday: setMondayInterval,
   tuesdayValue: tuesdayInterval,
   handleTuesday: setTuesdayInterval,
   wednesdayValue: wednesdayInterval,
   handleWednesday: setWednesdayInterval,
   thursdayValue: thursdayInterval,
   handleThursday: setThursdayInterval,
   fridayValue: fridayInterval,
   handleFriday: setFridayInterval,
   saturdayValue: saturdayInterval,
   handleSaturday: setSaturdayInterval,
   sundayValue: sundayInterval,
   handleSunday: setSundayInterval,
 };

mondayValue 是星期一时间间隔的字符串数组（来自数据库），timeSelectValue 是所有 select 可用时间间隔的字符串数组。

This is how the form with not fully populated times looks like (for ex. monday is empty, some other times have not all times that should be there)

And these are the monday times that should be shown (6:00-9:00 and 9:00-12:00)

这是我第一次提出问题，如果我能以某种方式改进describing/showing，请告诉我。

编辑：尝试使用 select 中的 renderValue 选项：

  <Select
                labelId="monday_select"
                fullWidth
                id="monday_select"
                value={daysObject.mondayValue}
                multiple
                onChange={handleChangeMultipleMonday}
                input={<OutlinedInput label="Monday times" />}
                MenuProps={MenuProps}
                renderValue={(value) => (
                  <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                    {value.map((value) => (
                      <Chip key={value} label={value} />
                    ))}
                  </Box>
                )}
              >
                {daysObject.timeSelectValue.map((time) => (
                  <MenuItem
                    key={time}
                    value={time}
                    style={getStyles(time, daysObject.mondayValue, theme)}
                  >
                    {time}
                  </MenuItem>
                ))}
              </Select>

通过这种方式显示值，但它们未标记为 selected，并且无法控制： Displayed but not controlled values

Answer 1

经过一些调试后，我意识到问题只存在于两个时间间隔 - 6:00 - 9:00 和 9:00 - 12:00。这不是 MUI multi-select 的问题，而是格式本身 - 时间数组中的时间是 6:00 - 9:00 和 9:00 - 12:00，但是数据库会将它们保存为 06:00 - 09:00 和 09:00 - 12:00 因此 select 不会像它应该的那样运行。

Material UI multi-select 初始值未正确显示

Material UI multi-select initial values not correctly displayed

reactjs

material-ui