Асинхронная функция на 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

код тестовый просто чтобы понять контекст


Ответы (0 шт):