मेरे पास निम्नलिखित कोड है।

मेरा कोड

मैं जो चाहता हूं वह यह है कि जब मैं "भेजें" बटन पर क्लिक करता हूं तो यह त्रुटि या सफलता संदेश दिखाता है। मैंने कोशिश की:

.then(() =>
    setAfterSendSuccess("Thank you. We will contact you shortly.")
  )
  .catch(() =>
    setAfterSendError("Something went wrong. Please try again later")
  );

लेकिन यह हमेशा हरा सफलता संदेश दिखाता है।

इसके अलावा मेरे पास "लोड हो रहा है" घटक है जो सेंड बटन पर क्लिक करने पर लोड होना शुरू हो जाना चाहिए।

उसके लिए मैंने कोशिश की:

{!!setFormLoading(true) && <Loading />} 
0
someone 20 जुलाई 2020, 15:54

1 उत्तर

सबसे बढ़िया उत्तर

समस्या आपके द्वारा fetch api के उपयोग से संबंधित है। आप उम्मीद कर रहे हैं कि fetch 4xx या 5xx http प्रतिक्रिया कोड होने पर वादे को अस्वीकार कर देगा, लेकिन फ़ेच ऐसा नहीं करता है। यह केवल नेटवर्क विफलताओं या अन्य चीजों को अस्वीकार करता है जो फ़ेच को होने से रोकते हैं।

तो आपको अपना कोड निम्न की तरह कुछ संशोधित करना होगा:

fetch(`real link`, {
  method: "POST",
  body: JSON.stringify({ email }),
})
  .then((response) => {
    if (!response.ok) {
      throw response;
    }
    return response.json(); // if you don't care about the data, you can leave this out
  })
  .then(() => setAfterSendSuccess("Thank you. We will contact you shortly."))
  .catch(() =>
    setAfterSendError("Something went wrong. Please try again later")
  );

इसके अलावा मेरे पास "लोड हो रहा है" घटक है जो सेंड बटन पर क्लिक करने पर लोड होना शुरू हो जाना चाहिए।

आपका jsx यह होना चाहिए: {formLoading && <Loading />}, और आपको सबमिट फ़ंक्शन की शुरुआत में setFormLoading को true के साथ कॉल करना होगा, और .then और .catch में false के साथ कॉल करना होगा।

0
Nicholas Tower 20 जुलाई 2020, 16:02