如何重置Material UI Autocomplete组件的getTagProps清除选中标签计数？

可以通过prop实现重置，你的组件使用的是Material UI Autocomplete的受控模式，选中值完全由传入的value prop控制，不需要操作内部维护的tagValue。

问题根因 #

计数累加的核心原因是切换国家时没有同步重置州/省份选择器绑定的value值，旧的选中值一直保留在数组中，新选中的值会在旧数组基础上追加，所以出现计数累加的问题。

解决方案 #

1. 切换国家时主动清空绑定值 #

在父组件切换国家的回调逻辑中，直接把绑定到该Autocomplete组件的value字段重置为空数组即可：

• 如果使用Formik管理表单，直接调用 setFieldValue('对应州/省份的字段名', [])
• 如果使用useState管理状态，直接调用对应的state更新方法 setSelectedProvince([])

2. 组件内自动校验清理无效值（可选优化） #

可以在封装的AutocompleteSelect组件内加useEffect逻辑，监听选项列表变化时自动过滤掉不在当前选项列表里的无效选中值，避免出现选中值不存在于选项列表的异常情况：

// 组件顶部引入useEffect
import { useEffect } from 'react';

function AutocompleteSelect(props) {
  // ... 原有逻辑不变
  const updatedOptions = options.reduce((acc, data) => ({ ...acc, [data.id]: data[optionLabel] }), {});

  // 新增无效值校验逻辑
  useEffect(() => {
    if (!multi || !Array.isArray(value)) return;
    const validOptionKeys = Object.keys(updatedOptions);
    // 过滤出还存在于新选项列表中的有效值
    const validSelectedValues = value.filter(item => validOptionKeys.includes(item));
    // 选中值有变化时同步更新
    if (validSelectedValues.length !== value.length) {
      setFieldValue?.(name, validSelectedValues);
      onChange?.(validSelectedValues);
    }
  }, [options, value, multi, updatedOptions, setFieldValue, name, onChange]);

  // ... 原有剩余逻辑不变
}

3. 修复renderTags的小缺陷 #

你当前自定义的renderTags方法里，+计数的Tooltip组件key直接用了数组tagValue，建议改为字符串形式的稳定key，避免重渲染异常：

<Tooltip
  key={tagValue.join(',')} // 把数组转成字符串作为稳定key
  title={tagValue.slice(maxLength, tagValue.length).map((tag) => updatedOptions[tag]).join(', ')}
  placement="right-start"
>

以上修改完成后，切换国家时选中值会被完全重置，计数就会正常归零，不会再出现累加的问题。

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