Асинхронная функция на onChange в Autocomplete Material UI
У меня есть React компонент где я использую компонент Autocomplete из Material UI AutoComplete API
const [client, setClient] = useState<Client | null>(null);
useEffect(() => {
if (!command) {
return;
}
setClient(team.client);
}, [command]);
const handleChangeClient = async (newClient: Client | null) => {
if (!newClient) {
return;
}
setIsLoadingNewClient(true);
try {
const url = "test-url";
const response = await axios.patch(
url,
{
accountId: newClient.id,
},
{
headers: getAuthHeaders(),
}
);
if (response.status === HttpStatusCode.Ok) {
setClient(newClient);
}
} catch (error: any) {
testHandleError()
} finally {
setIsLoadingNewClient(false);
}
};
<CustomAutocomplete
loading={
isLoadingAvailableClients
}
loadingText="Loading..."
size="small"
options={availableClients}
value={owner}
onChange={(e, value) =>
handleChangeOwner(value)
}
renderOption={(
props,
option
) => (
<li
{...props}
value={option.accountId}
key={option.accountId}
>
{option.firstName}
{option.lastName}
</li>
)}
getOptionLabel={(member) =>
`${member.firstName} ${member.lastName} (${member.email})`
}
renderInput={(params) => (
<TextField
{...params}
label="Select Client"
variant="outlined"
InputProps={{
...params.InputProps,
endAdornment: (
<>
{isLoadingNewClient ? (
<CircularProgress
color="inherit"
size={
20
}
/>
) : null}
{
params
.InputProps
.endAdornment
}
</>
),
}}
/>
)}
/>
Нигде не могу найти, есть ли возможность вызывать на onChange в Autocomplete асинхронную функцию и только в результате ее работы менять value в Autocomplete или в результате ошибки не менять. Сейчас почему-то value все равно меняется вне зависимости от того получил я 200 статус или словил ошибку в catch
код тестовый просто чтобы понять контекст