Creé una función que hace una llamada a una API que se muestra a continuación. Estoy mostrando el mensaje de setMessage en la parte delantera. Por alguna razón, cuando no hay ningún error, el mensaje de bloque .catch parpadea en setMessage() y luego setMessage() finalmente termina con el mensaje correcto de .then().
No estoy seguro de por qué es esto.
function handleCoupon(e) { e.preventDefault(); setMessage(""); setLoading(true); fetch(`${process.env.NEXT_PUBLIC_SERVER_API}/subscription/coupon/get`, { method: "POST", body: JSON.stringify({ appliedCoupon: couponCode.toLowerCase().trim(), }), headers: { "Content-Type": "application/json", }, }) .then((response) => response.json()) .then((data) => { console.log(data); if (data.coupon === true) { setMessage(data.message); setLoading(false); } else { setMessage(data.message); setLoading(false); } }) .catch( (error) => console.log(error.message), setMessage("Something went wrong, please contact support") ); }El .catch solo acepta una sola función como parámetro, y está pasando 2 de ellos:
(error) => console.log(error.message)setMessage("Something went wrong, please contact support")Intente fusionarlos en 1 función, por ejemplo
.catch((error) => { console.log(error.message); setMessage("Something went wrong, please contact support"); });