Доброе утро, я новичок в React Передо мной стоит задача -

обработка ошибки 422 с сервера и отображение в UI.

Использую общий useApi с axios.

const [error, setError] = useState<ApiError | null>(null);

catch (error: unknown) {
if (error instanceof AxiosError && error.response) {
if (error.response.status === 401) {
localStorage.removeItem(LOCAL_STORAGE_TOKEN_KEY);
location.reload();
}

setError({ code: error.response.status, text: error.response.data.errors });
} else {
setError({ code: 520, text: 'an unexpected error occurred.' });
}
setData(null);
setIsLoading(false);
}

Вот мой код где я пытаюсь словить ошибку в state и потом передаю в другие компоненты.

Проблема в том что при первом вызове Api с ошибкой значение error равно null, при втором вызове Api setError отрабатывает нормально и мой error равен ошибке.

Я так понимаю проблема в асинхронностю в работе useState. Но чем его заменить в моей ситуации?

Буду благодарен за совет/помощь.

Да тут все верно написано и не сказать что новичек. Стейт не асинхронный, у него такая реализация что изменения видны не сразу, забыл уже как это все называется. Тебе надо просто правильно выводить ошибку на экран

Правильно ошибку на экран не выведу, поскольку получу null от useApi Замкнутый круг выходит 😄

Покажи полностью свой компонент с запросом и ретурном jsx

Он довольно большой const handleSubmit = async (values: FormValues) => { let orgName = ''; let orgNumber = ''; if (enterpriseInfo && !enterpriseInfo.id) { orgName = enterpriseInfo.name || ''; orgNumber = enterpriseInfo.orgNumber || ''; } const payload = { firstName: values.firstName, lastName: values.lastName, phoneCode: selectedPhoneCode?.key || '', phoneNumber: values.phoneNumber, email: values.email, enterpriseId: enterpriseInfo?.id || null, createEnterprise: { orgName: orgName, orgNumber: orgNumber, }, type: customerType, }; const response = await createCustomerRequest.execute( ${process.env.REACT_APP_API_BASE_URL}/v1/customer, 'POST', { customer: payload, generateAndSendPassword: sendPassword, }, ); if (createCustomerRequest.error) { const errorText = createCustomerRequest.error.text; setErrors({ firstName: errorText?.firstName?.[0] || '', lastName: errorText?.lastName?.[0] || '', phoneCode: errorText?.phoneCode?.[0] || '', phoneNumber: errorText?.phoneNumber?.[0] || '', email: errorText?.email?.[0] || '', customerType: errorText?.type?.[0] || '', }); } if (response && response.customer) { setUserId(response.customer.uid); setPersonId(response.customer.personId); setFirstName(values.firstName); setLastName(values.lastName); setSubmissionStatus('success'); } }; Это отправка формы на бек, по клику кнопки. <TextField placeholder={intl.formatMessage({ id: translationKeys.create_customer_drawer_phone_placeholder, })} type="text" label={intl.formatMessage({ id: translationKeys.create_customer_drawer_phone_label, })} size="large" name="phoneNumber" onChange={handleChange} onBlur={handleBlur} value={values.phoneNumber} errorText={ (touched.phoneNumber ? errors.phoneNumber : undefined) || apiErrors.phoneNumber } data-testid="phone-number-input" /> И вот к примеру поле где я отображаю ошибку, в errorText передаю apiErrors.phoneNumber Но этот блок не отработает, if (createCustomerRequest.error) поскольку createCustomerRequest.error === null

Залей в сандбокс тогда чтоли

location.reload Умер