MUI多选Autocomplete组件显示选中项但无值返回问题排查

问题根源 #

1. 多选模式下value类型错误：你给value传的是单个对象（find返回结果），但多选Autocomplete的value必须是选项对象数组，直接导致组件状态不匹配。
2. onChange参数理解错误：MUI Autocomplete的onChange回调第一个参数是事件对象，第二个才是选中的选项数组，你把事件对象当成选项数组处理，自然拿不到正确值。
3. 状态存储逻辑混乱：selectedValue被存成字符串数组，却用它去匹配单个对象的value，完全不匹配，导致value属性无法正确关联选中项。

修复步骤 #

1. 修正onChange回调函数 #

调整参数获取方式，正确拿到选中的选项数组，合理存储状态：

selectyearValue(e, selectedOptions) {
  // 提取选项的value字段存到selectYear
  const selectedValues = selectedOptions.map(opt => opt.value);
  this.setState({
    selectYear: selectedValues,
    selectedOptions: selectedOptions, // 直接存储选中的选项对象数组，供value使用
    isLoading: true,
  });
}

2. 修正Autocomplete的value属性 #

多选模式下，value必须是选项对象数组，直接使用存储的selectedOptions即可：

<Autocomplete
  filterSelectedOptions
  multiple
  size="small"
  renderInput={(params) => (
    <TextField {...params} label="Select Event" />
  )}
  value={this.state.selectedOptions || []} // 使用选项对象数组作为value
  getOptionLabel={(option) => option.value}
  onChange={this.selectyearValue}
  options={this.state.confevents}
  // 可选：自定义选项匹配规则，避免复杂对象的匹配错误
  isOptionEqualToValue={(option, value) => option.value === value.value}
/>

3. 初始化状态 #

确保组件挂载时，selectedOptions初始化为空数组：

constructor(props) {
  super(props);
  this.state = {
    confevents: [],
    selectYear: [],
    selectedOptions: [],
    isLoading: false,
  };
}

额外说明 #

• 多选模式下，Autocomplete依赖value的数组类型管理选中状态，必须保证value和options结构一致（均为选项对象数组）。
• 当选项对象结构复杂时，isOptionEqualToValue能明确组件判断选中项的规则，避免状态误判。

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