Попытка отфильтровать дублирующие выборы в блоке Antdesign Select с небольшим успехом ⇐ Javascript

[Anonymous]

По сути, у меня есть этот выборочный поле, который я пытаюсь проверить вводные входы, они не могут быть короче или дольше 7 символов, и все персонажи должны быть числами, и ящик для ввода не должен позволить вам внести дублированную ценность. Я чувствую, что это довольно простая вещь, и я переоцениваю решение. Проблема состоит в том, что в поле выбора показаны дубликатное значение, даже при фильтровании через множественные функции .
prc.png ". /> Вот входное поведение, которого я пытаюсь избежать выше. Независимо от того, какие фильтры я вкладываю на реквизит, я не могу заставить дубликатские значения правильно отображать, и я довольно озадачен тем, как это исправить. < /P>

Код: Выделить всё

< Select
mode = "tags"
value = {
pid
}
onChange = {
(selectedPIDs) => {
// Convert all entries to strings first for consistent validation
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
setPid(validUniquePIDs);
setCompany(prev => ({
...prev,
pid: validUniquePIDs
}));
}
}
onBlur = {
() => {
// Step 4: Force cleanup on blur (removes any lingering invalid entries)
const validatedPIDs = pid.filter(p => /^\d{7}$/.test(p.toString()));
setPid(validatedPIDs);
setCompany({
...company,
pid: validatedPIDs
});
}
}
disabled = {
isReadOnly
}
tokenSeparators = {
[]
}
onInputKeyDown = {
(e) => {
if (e.key === 'Enter') {
e.preventDefault();
// Manually trigger validation
const validatedPIDs = pid.filter(p => /^\d{7}$/.test(p.toString()));
setPid(validatedPIDs);
setCompany({
...company,
pid: validatedPIDs
});
}
}
}
allowClear
dropdownStyle = {
{
display: 'none'
}
}
notFoundContent = {
null
} // Hide dropdown entirely
tagRender = {
(props) => {
// Optional: Customize how tags appear (e.g., ensure they're numbers)
return ( <
Tag closable = {
!isReadOnly
}
onClose = {
props.onClose
} > {
Number(props.value)
} <
/Tag>
);
}
}
/>

Подробнее здесь: https://stackoverflow.com/questions/796 ... with-littl