Cannot Read Property Then of Undefined React
Resolving the JavaScript Hope Error "TypeError: Cannot Read 'Then' of Undefined"
Introduction
Working with JavaScript Promise comes with its ain array of errors, and a popular one is
TypeError: Cannot read belongings 'then' of undefined.
In this guide, we will cover 2 code examples containing a bugs that cause this TypeError and so refactor the lawmaking to resolve the issue.
Instance i
Say you have the function getTaxAmount(price, taxRate) . It takes 2 arguments, price and taxRate , calculates the corporeality of tax using the inputs, and is expected to return a Promise that resolves to the calculated tax amount.
Adjacent, call getTaxAmount() role with two arguments and log the returned value on the console.
1 const getTaxAmount = ( toll , taxRate ) => { 2 Math . flooring ( ( price * taxRate ) / 100 ) ; 3 } ; four 5 getTaxAmount ( 100 , 12 ) . and then ( ( taxAmount ) => panel . log ( taxAmount ) ) ; js
If y'all run this buggy code on your browser console or using Node CLI, you volition become this mistake:
1 TypeError: Cannot read property 'then' of undefined sh
Instance 2
Hither'southward another example. getGithubOrgs(url) is a role that takes a URL and uses Fetch API to get GitHub system data for a given user(deekshasharma). fetch() makes a network request to the destination URL and returns a Promise that resolves to a response object. The response is then parsed into a JSON. This function is expected to return a Promise that should resolve to JSON information.
The getGithubOrgs() part is then called with an argument containing a valid URL and logs the resulting JSON on the console.
1 function getGithubOrgs ( url ) { 2 fetch ( url ) . so ( ( response ) => response . json ( ) ) ; 3 } 4 5 getGithubOrgs ( half dozen "https://api.github.com/users/deekshasharma/orgs" 7 ) . then ( ( jsonData ) => console . log ( jsonData ) ) ; js
When you run this code in the browser console, you lot will get an mistake:
1 TypeError: Cannot read property 'and so' of undefined sh
What Causes This TypeError
TypeError - Cannot read property 'and then' of undefined is thrown when the caller is expecting a Hope to be returned and instead receives undefined . Let's consider the higher up examples.
In Instance 1, the getTaxAmount(cost, taxRate) function, when called, should have returned a Promise that resolves to a value of 12 . Currently this role just calculates the taxation amount using the two inputs and does not return a value. Hence, the undefined value is returned.
In Example ii, the getGithubOrgs(url) part calls the Fetch API, which returns a Promise that resolves to a response object. This resulting Promise is received by the and so() method, which parses the response to JSON using the json() method. Finally, then() returns a new Hope that resolves to JSON. But you may have noticed there is no return statement inside the getGithubOrgs(url) function, which means the resulting Promise from the then() method is never returned to the calling code.
How to Fix This Error
To resolve the issue in both code examples, you'll demand to refactor the functions. Allow'due south expect at them one by 1.
Example 1
The function getTaxAmount() should exist refactored to the lawmaking beneath.
Promise.resolve() returns a resolved Promise with the value of the taxation corporeality calculated by the function. So the calling lawmaking will ever receive a Promise equally long every bit valid arguments were passed.
1 const getTaxAmount = ( toll , taxRate ) => { 2 return Promise . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; iii } ; 4 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and yous should get an ouput of 12 .
Instance 2
The part getGithubOrgs(url) should be refactored to include a return argument and then that a Promise tin can exist returned to the caller.
1 role getGithubOrgs ( url ) { 2 return fetch ( url ) . then ( ( response ) => response . json ( ) ) ; 3 } 4 five getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => vi console . log ( res ) vii ) ; js
Conclusion
Whenever you see this TypeError while working with JavaScript Promise, the first step is to audit the lawmaking that was expected to return a Hope . Afterwards all, you get this error when calling the and then() method on a Promise . And the TypeError indicates you are calling and then() on undefined , which is a hint that the Promise itself is undefined . The next step is to go and debug the code to effigy out why a Promise is non returned. We looked at ii unlike code examples to run into what tin potentially cause this fault and how to resolve information technology.
You tin read more than nigh Promise.then() on MDN.
Cannot Read Property Then of Undefined React
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "Cannot Read Property Then of Undefined React"
Post a Comment