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
相关产品推荐
相关产品推荐

