Antd多选Select仅选1项显示+1...而非实际值的渲染异常问题

这个渲染异常和options定义、选中值的内容无关，本质是两类常见冲突触发的，刚好对应你遇到的「选中多个值时逻辑正常，仅选单值时异常」的现象：

• 第一类是maxTagCount="responsive"的宽度计算逻辑和mode="tags"模式的适配冲突：responsive模式依赖容器实际宽度计算可展示的标签数量，如果组件首次挂载时容器处于隐藏状态（比如在Modal、抽屉、折叠面板内）、初始宽度计算为0，就会误判可展示的标签数为0，哪怕实际只选中1个值，也会把标签全部折叠成+1 ...的形式；等后续容器正常显示时，组件没有自动触发宽度重算，错误状态就会一直留存。
• 第二类是值类型不匹配触发的计算错位：mode="tags"模式要求组件绑定的value必须是数组格式，如果从Form拿到的绑定值是单字符串（比如从旧单选逻辑遗留的非数组数据），组件内部的标签计数逻辑会出现错位，本该正常展示的单个标签会被算进折叠计数里，最终只显示折叠提示。而手动选择多个值时组件会自动把值整理成数组格式，计数逻辑恢复正常，因此多值状态下不会出现异常。

• 先做快速验证：临时把maxTagCount="responsive"改成固定值（比如maxTagCount={20}），如果修改后单选状态下标签能正常展示，就可以确认是responsive模式的计算问题，和其他配置无关。
• 再校验绑定值的类型：在Select的onChange事件里打印实际拿到的value，确认值是数组格式，不存在单字符串的异常情况，同时核对所有选中的value值，和options里定义的value类型完全匹配（比如都是字符串就不要出现数字类型的取值），避免因为找不到对应标签内容被组件自动折叠。
• 最后确认组件挂载场景：如果Select是在初始隐藏的容器内渲染，大概率是初始宽度计算为0的适配bug。

• 不需要自动宽度折叠的场景：直接替换maxTagCount的配置为固定值或者Infinity，完全关闭折叠逻辑，从根源绕开responsive的计算bug。
• 必须保留responsive折叠能力的场景：
  • 增加值类型兼容逻辑，把非数组的绑定值手动转成数组，避免计数错位：

    <Select
      allowClear
      maxTagCount="responsive"
      mode="tags"
      options={assetClassOptions}
      onChange={(value) => {
        // 兼容非数组值的异常输入
        return Array.isArray(value) ? value : []
      }}
    />
    

  • 针对隐藏容器内挂载的计算bug，在组件挂载完成后手动触发一次resize事件，强制Select重新计算可展示的标签数量：

    // 配合函数组件的生命周期使用
    useEffect(() => {
      const triggerResize = () => window.dispatchEvent(new Event('resize'))
      // 延迟触发，等容器完全渲染完成再计算
      const timerId = setTimeout(triggerResize, 100)
      return () => clearTimeout(timerId)
    }, [])
    

• 针对options匹配错位的问题：确保所有选中的value都能在options数组里找到完全匹配的同类型条目，避免因为找不到对应label，被组件自动折叠到计数里。

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