Штат принят с опозданием ⇐ Javascript

[Anonymous]

в приложении реагирования, которое я поддерживаю (я его не писал, я новичок в компании), есть компонент оформления заказа, в котором разработчик решает разбить его на несколько, как показано на скриншоте, введите описание изображения здесь

затем импортируйте их в более крупный, как показано ниже


{/* Desktop: TrustBadges above both columns, Mobile: positioned with flexbox order */}
{product?.trust_badges?.length > 0 && (



)}

















Проблема в том, что в одном из них пользователю необходимо выбрать штат, чтобы он рассчитал стоимость доставки, и пока он не выбран, отображается сообщение о том, что он должен выбрать штат, чтобы получать стоимость доставки
здесь
const onAddressSelect = (address) => {
setFormData({
...formData,
name: currentUser?.name,
phone: address?.phone,
state_id: address?.state_id,
address: address?.address,
city: address?.city_name,
});
setSelectedAddressId(address?.id);
// Clear errors when address is selected
setErrors({
name: "",
phone: "",
state_id: "",
city: "",
address: "",
payment_type: "",
});
};

и сам компонент:
const ShippingInfo = ({ formData, setFormData }) {
"the rest of comopnent"
}

и где рассчитывается стоимость доставки
{cartSummary?.shipping_cost && (
[*]

{translate("Shipping")} :


{!formData?.state_id
? translate("Select your state to calculate shipping")
: parseFloat(cartSummary?.free_shipping) || (cartSummary?.shipping_cost == '0 L.E')
? translate("free shipping")
: cartSummary?.shipping_cost ||
translate("Calculating shipping...")}


)}

Проблема в том, что между отсутствием выбранного состояния и его выбором и расчетом, показывающим бесплатную доставку и фактические сборы, проходит доля секунды.
Я попробовал создать состояние загрузки, в котором оно передается, например

const [shippingCostLoading, setShippingCostLoading] = useState(false);

и передать его туда, где он нужен, начиная с того места, где он выбран
const { mutate: getShippingCostMutation, isLoading: shippingCostLoading } = useMutation(getShippingCost, {
onSuccess: () => {
// Invalidate cart summary query after getting the shipping cost
queryClient.invalidateQueries("cartSummary");
},
onError: (error) => {
console.error("Error fetching shipping cost:", error);
},
});

и убедиться, что это везде


в итоге был добавлен дополнительный шаг перед отображением бесплатной доставки, а затем фактических сборов

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

поэтому я просто решил жестко запрограммировать таймер на 1,5 секунды, думая, что этого достаточно для передачи состояния и расчета комиссий

я знаю, что это просто патч для одноразовой ошибки, но ничего не мог придумать лучше
if (name === "state_id" && value) {
setIsCalculating(true);
setTimeout(() => setIsCalculating(false), 1500);
getShippingCostMutation(value); // Send state_id for the mutation
}
};

{cartSummary?.shipping_cost && (
[*]

{translate("Shipping")} :


{!formData?.state_id
? translate("Select your state to calculate shipping")
: isCalculating
? translate("Calculating shipping...")
: parseFloat(cartSummary?.free_shipping) ||
cartSummary?.shipping_cost == "0 L.E"
? translate("free shipping")
: cartSummary?.shipping_cost ||
translate("Calculating shipping...")}


)}


Подробнее здесь: https://stackoverflow.com/questions/798 ... with-delay