使用Material-UI多值Autocomplete动态选项时出现getOptionSelected相关匹配报错

• getOptionSelected 逻辑错误
  你传给Autocomplete的options数组、tags状态里的元素都是纯字符串，但你定义的匹配逻辑为(option, value) => option === value.value——传入getOptionSelected的两个参数（待匹配项option、当前选中项value）本身就是字符串，不存在value属性，对比结果永远为false，Autocomplete无法关联选中值和可选列表，直接抛出匹配警告。
• 动态插入的自定义选项未同步到全局options prop
  你在filterOptions中手动把输入的自定义值push进临时过滤结果，支持用户创建新标签，但这些临时插入的字符串没有同步到外层传给Autocomplete的options列表，当用户选中这类自定义标签时，Autocomplete在正式可选列表中找不到对应项，会再次触发匹配警告。
• 混用受控/非受控逻辑
  你同时用了受控的tags状态绑定onChange、又写了defaultValue初始值，会导致状态同步异常，放大匹配错误的问题。

• 重写getOptionSelected逻辑，纯字符串选项直接对比两个值本身即可
• 将用户新建的自定义标签同步到全局options数组，保证所有可被选中的项都属于正式options列表
• 统一受控逻辑：用value prop绑定tags状态，移除冗余的defaultValue，避免状态混乱
• 优化filterOptions逻辑，替换原来嵌套的冗余过滤判断，简化匹配流程

// 动态维护可选标签列表
const [top100Films, setTop100Films] = useState(['prova1','prova2','prova3']);
// 绑定选中的标签值
const [tags, setTags] = useState(['prova1', 'prova2']);

<Autocomplete
        multiple
        id="tags-outlined"
        noOptionsText={'Nessuna opzione'}
        options={top100Films}
        value={tags}
        onChange={(event, selectedValues) => {
          // 同步新增的自定义标签到全局可选列表
          const newTags = selectedValues.filter(item => !top100Films.includes(item));
          if (newTags.length) {
            setTop100Films(prevOptions => [...prevOptions, ...newTags]);
          }
          setTags(selectedValues);
        }}
        // 修正匹配逻辑：纯字符串直接对比
        getOptionSelected={(option, selectedValue) => option === selectedValue}
        getOptionLabel={(option) => option}
        filterOptions={(options, params) => {
          // 过滤掉已选中的选项，避免重复选择
          const unselectedOptions = options.filter(item => !tags.includes(item));
          // 按输入内容做模糊匹配
          const matchedOptions = unselectedOptions.filter(item => 
            item.toLowerCase().includes(params.inputValue.trim().toLowerCase())
          );
          // 输入非空时，展示可创建的自定义标签选项
          const inputVal = params.inputValue.trim();
          if (inputVal && !tags.includes(inputVal) && !options.includes(inputVal)) {
            matchedOptions.push(inputVal);
          }
          return matchedOptions;
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Tag"
            placeholder="Inserisci tag"
          />
        )}
      />

如果不需要支持用户创建自定义标签，只使用预设固定选项，仅修正getOptionSelected逻辑、移除自定义push新值的逻辑即可消除所有警告。

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