Добавление Debounce в автозаполняющий пользовательский интерфейс материала
import React, { useCallback, useEffect, useState } from "react";
import Autocomplete from '@mui/lab/Autocomplete';
import TextField from '@mui/material/TextField';
import debounce from "lodash/debounce";
import { getOptionsAsync } from "./options";
function App() {
const [options, setOptions] = useState([]);
const [inputValue, setInputValue] = React.useState("");
const getOptionsDelayed = useCallback(
debounce((text, callback) => {
setOptions([]);
getOptionsAsync(text).then(callback);
}, 200),
[]
);
useEffect(() => {
getOptionsDelayed(inputValue, (filteredOptions) => {
setOptions(filteredOptions);
});
}, [inputValue, getOptionsDelayed]);
return (
<Autocomplete
options={options}
getOptionLabel={(option) => option.title}
filterOptions={(x) => x} // disable filtering on client
loading={options.length === 0}
onInputChange={(e, newInputValue) => setInputValue(newInputValue)}
renderInput={(params) => <TextField {...params} label="Combo box" />}
/>
);
}
Mystic Dev