MUI Autocomplete基于对象数组返回一维ID数组问题求助

你的核心问题是Autocomplete组件的value（ID数组）和options（对象数组）类型不匹配，导致组件无法正确关联选中项。以下是修复方案：

关键改动说明 #

• 将ID数组转换为选项对象数组传入value：组件在multiple模式下，默认需要value是选项对象的集合，而非原始ID，这样才能和options正确匹配。
• 修正isOptionEqualToValue的匹配逻辑：现在比较的是两个对象的id属性，而非对象和ID值。

修改后的完整代码 #

<Autocomplete
  options={channels}
  autoHighlight
  multiple
  disableCloseOnSelect
  // 把ID数组转换成对应的选项对象数组
  value={channels.filter(channel => form.channel_ids.includes(channel.id))}
  getOptionLabel={option => option.name}
  onChange={(event, selectedOptions) => {
    // 依然将选中的对象映射为ID数组存到form中
    updateForm({...form, channel_ids: selectedOptions.map(channel => channel.id)})
  }}
  renderInput={params => 
    <TextField
      {...params}
      label="Channels"
      error={!!errors?.channel_ids}
      helperText={errors?.channel_ids?.[0]}
    />
  }
  // 修正匹配逻辑：比较两个选项的id
  isOptionEqualToValue={(option, value) => option.id === value.id}
  renderOption={(props, option, {selected}) =>
    <li {...props}>
      <Checkbox
        icon={<Icon path={mdiCheckboxBlankOutline} size={1} />}
        checkedIcon={<Icon path={mdiCheckboxMarked} size={1} />}
        style={{marginRight: 8}}
        checked={selected}
      />
      {option.name}
    </li>
  }
/>

原理解释 #

1. value属性：通过channels.filter筛选出form.channel_ids包含的ID对应的对象，这样组件能直接识别哪些选项是选中状态。
2. isOptionEqualToValue：当组件需要判断某个选项是否属于当前值时，会调用这个函数，现在比较的是两个对象的id，逻辑更准确。
3. onChange：保持原有逻辑，将选中的对象数组转换为ID数组更新到表单，满足你存储ID的需求。

内容的提问来源于stack exchange，提问作者SuperDJ