如何去抖動 mui 自動完成

Question

我需要去抖動onInputChange function

export interface AutocompleteProps<V extends FieldValues> {
  onInputChange: UseAutocompleteProps<UserOrEmail, true, false, false>['onInputChange'];
}
export default function MyAutocomplete<V extends FieldValues>({
  onInputChange
}: AutocompleteProps<V>) {

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value } }) => (
        <Autocomplete<UserOrEmail, true, false, false>

          onInputChange={onInputChange} //here

        />
      )}
    />
  );

我已經這樣做了（在外面使用 debounce 並像道具一樣傳遞它）並且它有效

const [search, setSearch] = useState('');
const searchDelayed = useCallback(
    debounce((newValue: string) => setSearch(newValue), 100),
    []
  );
      //Passing the prop like this
        /*
           onInputChange={(_, newValue) => {
                        searchDelayed(newValue);
                      }}
        */

我想在MyAutocomplete中去抖動，但我不能在debounce function 中調用onInputChange 。 如果我不調用它，那么我會收到一個錯誤，並且它不起作用

const searchsDelayed = useCallback( //does not work
     debounce(() => onInputChange, 100),
    [onInputChange]
  );

有什么想法可以做到嗎？

Answer 1

[已審查答案以避免混淆。]

主要問題在這里：

debounce(() => onInputChange, 100);

您正在對返回onInputChange的 function 進行去抖動，它不會調用它，並且需要調用它兩次。 要解決這個問題，只需直接傳遞onInputChange ：

debounce(onInputChange, 100);

---

無論如何，您正在嘗試使用useCallback但您可能沒有任何優化就可以了，所以您可以使用

const searchDelayed = debounce(onInputChange, 100);

但是如果你真的需要優化，在這種情況下你應該使用useMemo因為你需要 debounce 調用的結果：

const searchDelayed = useMemo(
    () => debounce(onInputChange, 100),
    [onInputChange]
);