MUI Autocomplete输入新选项按回车后旧选项被覆盖问题求助

核心问题 #

你遇到的第一个邮箱被第二个替换的问题，根源在renderTags函数里的标签文本逻辑：

const tagLabel = isExistingEmail ? label : newEmailLabel;

newEmailLabel是全局状态，每次添加新邮箱时都会被更新为最新输入的地址。当你添加第二个邮箱后，所有被判定为「非现有邮箱」的标签都会使用这个最新值，导致第一个手动添加的邮箱标签被覆盖。

而且实际逻辑中，你在回车添加邮箱时已经把新邮箱加入了emailList和selectedEmails，isExistingEmail的判断完全多余——手动添加的邮箱已经属于现有选项，option.title本身就是正确的邮箱地址，根本不需要依赖newEmailLabel。

修复步骤 #

1. 移除冗余状态 #

直接删除newEmailLabel相关的状态声明和赋值：

// 删除这行状态声明
const [newEmailLabel, setNewEmailLabel] = useState("");

// 删除onEmailKeyDown里的赋值语句
setNewEmailLabel(newEmail);

2. 简化renderTags逻辑 #

去掉isExistingEmail的判断，直接使用option.title作为标签文本：

renderTags={(value, getTagProps) =>
  value.map((option, index) => (
    <Chip
      variant="outlined"
      label={option.title}
      {...getTagProps({ index })}
    />
  ))
}

3. 可选：优化freeSolo逻辑（非必须） #

因为开启了freeSolo，Autocomplete本身支持手动输入添加选项，不需要自己监听回车事件。如果想简化代码，可以删掉newEmail和onEmailKeyDown相关代码，改用组件自带逻辑处理：

// 状态部分保留
const [emailList, setEmailList] = useState([
  { title: "customer1@example.com", group: "Customers" },
  { title: "customer2@example.com", group: "Customers" },
]);

const [selectedEmails, setSelectedEmails] = useState([]);

// 修改Autocomplete的onChange和renderInput
<Autocomplete
  multiple
  id="tags-filled"
  options={[{ title: "Choose All" }, ...emailList]}
  groupBy={(option) => option.group}
  getOptionLabel={(option) => option.title}
  freeSolo
  value={selectedEmails}
  onChange={(event, newValue) => {
    let processedValue = newValue;
    // 把freeSolo输入的字符串转为统一的对象格式
    processedValue = processedValue.map(item => {
      if (typeof item === 'string') {
        return { title: item, group: "Receivers" };
      }
      return item;
    });

    if (
      processedValue &&
      processedValue.find((option) => option.title === "Choose All")
    ) {
      setSelectedEmails(emailList);
    } else {
      // 把新增的邮箱同步到emailList
      const newEmails = processedValue.filter(item => 
        !emailList.some(email => email.title === item.title)
      );
      if (newEmails.length > 0) {
        setEmailList(prev => [...prev, ...newEmails]);
      }
      setSelectedEmails(processedValue);
    }
  }}
  renderTags={(value, getTagProps) =>
    value.map((option, index) => (
      <Chip
        variant="outlined"
        label={option.title}
        {...getTagProps({ index })}
      />
    ))
  }
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
    />
  )}
/>

效果验证 #

修改后，每个标签都会独立显示对应的邮箱地址，不会出现被后续输入覆盖的问题，同时「Choose All」的批量选择逻辑也能正常工作。

内容的提问来源于stack exchange，提问作者Süleyman Eminbəyli