एक प्रतिक्रिया घटक द्वारा फेंक दिया गया एक त्रुटि, एक असंबंधित वादे के पकड़ ब्लॉक में पकड़ा जा रहा है

Question

यहां मैंने जो कुछ भी लगाया है। कहीं न कहीं एक में घटक के समारोह प्रस्तुत करना प्रतिक्रिया है, मैं इस है:

{first_name} {last_name} 

मैं इस से बदल दिया:

{first_name.toUpperCase()} {last_name.toUpperCase()} 

और अपने आवेदन नहीं रह गया है में लॉग इन कर रहा से बात करने Axios उपयोग कर रहा हूँ। बैकएंड। एक्सिस वादा आधारित है। और मैंने उपरोक्त परिवर्तन करने के बाद। यह स्पष्ट रूप से then और catch दोनों login एपीआई कॉल के ब्लॉक को निष्पादित करना शुरू कर दिया। जैसा कि मैंने catch ब्लॉक में प्रतिक्रिया मुद्रित की है।

function login(data, success, error) { 
    axios.post('/login', 
    JSON.stringify(data), 
    { 
     baseURL: config.apiUrl, 
     headers: { 'Content-Type': 'application/json; charset=utf-8' } 
    }) 
    .then((response) => success(response.data)) 
    .catch((response) => { 
    console.log(response) 
    error(response.status)}) 
} 

मैं निम्नलिखित मिल:

TypeError: Cannot read property 'toUpperCase' of undefined 

इसमें ऊपर घटक (यह एक गूंगा घटक बस पृष्ठ पर रंगमंच की सामग्री से सामान प्रदर्शित है) और एपीआई बुला कोड के बीच कोई संबंध है।

यह पहली बार नहीं है जब मैं अपने ऐप में इस मुद्दे पर टक्कर लगी हूं। क्या किसी ने कभी इस तरह कुछ भी इस तरह से टक्कर लगी है? मैं समझता हूं कि घटक में मेरे चर अपरिभाषित हैं, और यही कारण है कि त्रुटि आती है। मेरा सवाल यह है कि यह ऐप के दूसरे छोर पर कहीं भी वादे के पकड़ ब्लॉक में कैसे बना देता है।

Answer 1

तो यह पता चला है कि जावास्क्रिप्ट में, किसी भी catch ब्लॉक किसी भी त्रुटि है कि कोड में कहीं भी फेंके जाने पकड़ लेंगे। और वह डिजाइन द्वारा है।

यहाँ spec है:

throw बयान उपयोगकर्ता परिभाषित अपवाद फेंकता है। का निष्पादन वर्तमान कार्य बंद हो जाएगा (फेंकने के बाद बयान निष्पादित नहीं होगा), और नियंत्रण ब्लॉक को कॉल स्टैक में पारित किया जाएगा। यदि कॉलर फ़ंक्शन के बीच कोई catch ब्लॉक मौजूद नहीं है, तो प्रोग्राम समाप्त हो जाएगा।

export function apiErrorHandler(handler) { 
    return (error) => { 
    if (error.stack) { 
     throw error 
    } 
    if (error.status && error.data) { 
     handler(error) 
    } else { 
     console.error('Unknown type of error thrown during service request or its handler:', error) 
    } 
    } 
} 

और की तुलना में यह Axios में प्लग:

एक वैकल्पिक हल सभी वादों कि आपका परिचय, कि console.log कुछ भी होता है कि यह उम्मीद नहीं थी, इस जैसे पर एक हैंडलर का उपयोग करने के लिए है सेवा:

export function serviceGetContacts(success, error) { 
    axios.get(`/contacts`, cfg()) 
    .then((response) => success(response.data)) 
    .catch(apiErrorHandler(error)) 
} 

Answer 2

यदि आपका पहला या अंतिम नाम अभी तक परिभाषित नहीं किया गया है तो आपका परिवर्तन टाइपएरर फेंक देगा। लॉगिन प्रक्रिया पूरी होने से पहले जो सुंदर पसंद है।

बजाय इस उपयोग करके देखें:

{first_name && first_name.toUpperCase()} {last_name && last_name.toUpperCase()}