You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Ant Design Select(tags模式)重复标签无法正确过滤显示问题求助

Ant Design Select(tags模式)重复标签无法正确过滤显示问题求助

大家好,我现在在使用Ant Design的Select组件(tags模式),想要实现几个输入校验规则:

  • 输入的PID必须是7位纯数字
  • 不能有重复的PID
  • 输入后要自动过滤掉不符合规则和重复的内容

目前我在onChange、onBlur和onInputKeyDown里都加了校验逻辑:先把所有输入转成字符串统一校验,用正则筛选出7位数字的内容,再通过Set去重,最后转成数字更新本地状态和表单状态。

但遇到了一个头疼的问题:虽然控制台打印的处理后结果已经是去重且符合规则的,状态也更新正确了,但Select组件的UI上还是会显示重复的标签。比如我输入同一个7位数字两次,组件上会出现两个相同的标签,和状态里的内容完全不一致,试了好几种调整逻辑的方法都没解决,实在搞不懂问题出在哪,求各位大佬帮忙看看!

下面是我的组件代码:

<Select
  mode="tags"
  value={pid}
  onChange={(selectedPIDs) => {
    // Convert all entries to strings first for consistent validation
    console.log("SelectedPIDs:");
    console.log(selectedPIDs);
    const stringPIDs = selectedPIDs.map(pid => pid.toString());
    // Filter valid (7-digit) and remove duplicates
    const validUniquePIDs = [...new Set(
      stringPIDs.filter(pidStr => /^\d{7}$/.test(pidStr))
    )].map(Number); // Convert back to numbers
    // Update both local and form state
    console.log("validUniquePIDs:");
    console.log(validUniquePIDs);
    setPid(validUniquePIDs);
    setCompany(prev => ({ ...prev, pid: validUniquePIDs }));
  }}
  onBlur={() => {
    const stringPIDs = pid.map(pid => pid.toString());
    const validatedPIDs = stringPIDs.filter(p => /^\d{7}$/.test(p.toString()));
    // Filter valid (7-digit) and remove duplicates
    const validUniquePIDs = [...new Set(
      validatedPIDs.filter(pidStr => /^\d{7}$/.test(pidStr))
    )].map(Number); // Convert back to numbers
    setPid(validUniquePIDs);
    setCompany({ ...company, pid: validUniquePIDs });
  }}
  disabled={isReadOnly}
  tokenSeparators={[]}
  onInputKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      // Manually trigger validation
      const stringPIDs = pid.map(pid => pid.toString());
      const validUniquePIDs = [...new Set(
        stringPIDs.filter(pidStr => /^\d{7}$/.test(pidStr))
      )].map(Number); // Convert back to numbers
      setPid(validUniquePIDs);
      setCompany({ ...company, pid: validUniquePIDs });
    }
  }}
  allowClear
  dropdownStyle={{ display: 'none' }}
  notFoundContent={null} // Hide dropdown entirely
/>

补充下:我确认状态更新是正常的,但组件显示就是和状态不匹配,重复的内容始终留在UI上,完全摸不着头绪了,麻烦各位帮忙分析下问题,感谢!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 10:10:28