Мне нужно, чтобы при наборе почтового индекса в onBlur все поля загружались, но почтовый индекс показывает загрузку.
const [loadingCEP, setLoadingCEP] = useState ('');
// функция, которую я вызываю для проверки почтового индекса и вызова загрузки
**async function handleOnBlurCEP(value) {
setLoadingCEP('true');
const validate = await customValidations.validateCEP(value);
setLoadingCEP('');
if (validate.message) {
clearError(formEnderecoFields.CEP);
setError(formEnderecoFields.CEP, 'cep', validate.message);
} else {
clearError(formEnderecoFields.CEP);
}
}**
return (
<>
<Grid item xs={12}>
<Typography variant="subtitle1">Endereço</Typography>
</Grid>
<Grid item xs={12} md={2}>
<InputForm
name={formEnderecoFields.CEP}
label={formEnderecoLabels.CEP}
id={formEnderecoFields.CEP}
inputRef={register}
errors={errors}
inputProps={{ mask: masks.cepMask }}
**onBlur={({ target: { value } }) => handleOnBlurCEP(value)}
loading={loadingCEP}**
/>
</Grid>
<Grid item xs={12} md={8}>
<InputForm
name={formEnderecoFields.ENDERECO}
label={formEnderecoLabels.ENDERECO}
id={formEnderecoFields.ENDERECO}
inputRef={register}
errors={errors}
**loading={loadingCEP}**
/>
</Grid>
Вот функция, которую я использую.
export async function validateCEP(cep) {
let filteredCEP = cep.replace(/[^\d]+/g, '');
if (!filteredCEP) {
return { message: validationMsg.VALIDATION_MESSAGES.REQUIRED };
}
if (filteredCEP && filteredCEP.length < 8) {
return { message: validationMsg.VALIDATION_MESSAGES.CEP };
} else {
const delay = (ms) => new Promise((res) => setTimeout(res, ms));
await delay(3000);
return { message: '' };
}
}