Проблемы с производительностью в форме React Hook с Watch () и выберите выпадение ⇐ Javascript

[Anonymous]

Я использую форму React Hook (RHF) для обработки форм и YUP для проверки в моем приложении React. У меня есть динамический список строк, каждый из которых содержит компонент автозаполнения из Material-UI (MUI), а также другие поля формы. Цель состоит в том, чтобы проверить и отслеживать ввод каждой строки. < /P>
Проблема:
Когда я изменяю значение выпадающего списка автозаполнения в одном из строк, я использую функцию watch () от rhf, чтобы проверить, была ли выбранная опция уже использовалась в другом месте в форме. Это сделано для предотвращения выбора опции дубликата в любом из строк. В частности, когда я меняю раскрывающееся значение, форма становится очень медленной, а другие входы начинают значительно отстают. Эта проблема не возникает до тех пор, пока я не буду изменять значение автозаполнения, и как только выпадающее значение обновляется, отзывчивость формы страдает. Обновлено.

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

 {
const findTerritory = territoryOptions?.find(({ value }) => value === field?.value);
return (
 {
const goals = watch('goals') as GoalValues[];
const isExist = goals?.find(({ territory }: any) => territory === value?.value);
if (isExist) {
showError({ message: 'This territory is already selected' });
onChange('');
} else {
onChange(value?.value);
}
}}
error={!!error?.[GoalInputs.TERRITORY]}
helperText={error?.[GoalInputs.TERRITORY]?.message as string}
sx={{ minWidth: 200 }}
/>
);
}}
/>

Я пытался решить проблему, но это не работало.>

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