Material-UI Autocomplete选项为对象时如何清空选中值？

你的问题出在空值的表示方式和选项匹配逻辑错误上，直接用空对象或空字符串会导致Autocomplete内部校验崩溃，下面是具体修复方案：

核心修改点 #

1. 用null表示空选中状态 #

Autocomplete对对象类型选项的空状态，标准写法是用null（或undefined），而非空对象。修改value属性的赋值：

value={Object.keys(user).length === 0 ? null : { label: defineName(user), id: user.id }}

2. 修正选项匹配逻辑 #

isOptionEqualToValue是用来判断选中值和选项是否一致的关键函数，你原来的逻辑拿标签文本和对象直接比较完全错误——要利用唯一的id匹配，同时处理空值：

isOptionEqualToValue={(option, value) => {
  if (!value) return false; // 无选中值时直接返回不匹配
  return option.id === value.id; // 用唯一ID判断匹配
}}

3. 修复标签渲染错误 #

原来的renderTags里直接把对象作为Chip的label，会显示[object Object]，而且空值时会触发map报错，需要调整：

renderTags={(tagValue, getTagProps) => {
  if (!tagValue) return []; // 空值时返回空数组，避免报错
  return tagValue.map((option, index) => (
    <Chip
      label={option.label} // 用选项的label属性作为标签文本
      sx={{ marginTop: '-2px !important' }}
      {...getTagProps({ index })}
      size='small'
      onDelete={undefined}
    />
  ));
}}

修改后的完整代码片段 #

const defineName = (item: Partial<Item>): string => `${item.firstName} ${item.middleName ?? ''} ${item.lastName}`;

<Autocomplete
  data-testid="userSelectField"
  freeSolo
  disabled={disabled}
  value={Object.keys(user).length === 0 ? null : { label: defineName(user), id: user.id }}
  options={searchResult.items.map((item) => ({ label: defineName(item), id: item.id }))}
  fullWidth={fullWidth}
  label={label ?? t('components:citizenshipInput.label')}
  isOptionEqualToValue={(option, value) => {
    if (!value) return false;
    return option.id === value.id;
  }}
  onInputChange={(e, value) => searchFn(value)}
  onChange={(e, value) => {
    const result = searchResult.items.find((item) => item.id === value?.id); // 可选链避免空值报错
    setUser(result as User);
  }}
  renderTags={(tagValue, getTagProps) => {
    if (!tagValue) return [];
    return tagValue.map((option, index) => (
      <Chip
        label={option.label}
        sx={{ marginTop: '-2px !important' }}
        {...getTagProps({ index })}
        size='small'
        onDelete={undefined}
      />
    ));
  }}
  labelSx={labelSx}
/>

触发清空的方式 #

如果需要通过按钮或其他交互清空选中值，只需调用setUser({})，此时Autocomplete的value会变为null，自动显示清空状态。

内容的提问来源于stack exchange，提问作者Eshiett Oto-obong