Gitkraken Pull Cannot Read Property Fullname of Undefined
Got an error like this in your React component?
Cannot read property `map` of undefined
In this post nosotros'll talk most how to prepare this i specifically, and forth the way you'll learn how to approach fixing errors in general.
We'll cover how to read a stack trace, how to interpret the text of the error, and ultimately how to fix it.
The Quick Fix
This error usually means you're trying to use .map on an assortment, but that array isn't defined yet.
That's frequently considering the array is a slice of undefined state or an undefined prop.
Make sure to initialize the state properly. That means if it will somewhen be an array, utilize useState([]) instead of something like useState() or useState(nix).
Permit's look at how nosotros can translate an fault bulletin and track down where it happened and why.
How to Find the Error
Kickoff order of business is to figure out where the error is.
If y'all're using Create React App, it probably threw upward a screen similar this:
TypeError
Cannot read holding 'map' of undefined
App
6 | render (
7 | < div className = "App" >
eight | < h1 > List of Items < / h1 >
> 9 | {items . map((detail) => (
| ^
x | < div fundamental = {detail . id} >
11 | {item . name}
12 | < / div > Look for the file and the line number starting time.
Hither, that's /src/App.js and line 9, taken from the low-cal grey text above the code block.
btw, when you run into something like /src/App.js:9:13, the way to decode that is filename:lineNumber:columnNumber.
How to Read the Stack Trace
If you're looking at the browser panel instead, you'll need to read the stack trace to figure out where the error was.
These always look long and intimidating, but the pull a fast one on is that unremarkably you can ignore most of it!
The lines are in order of execution, with the most contempo offset.
Hither'due south the stack trace for this error, with the only important lines highlighted:
TypeError: Cannot read property 'map' of undefined at App (App.js:ix) at renderWithHooks (react-dom.development.js:10021) at mountIndeterminateComponent (react-dom.development.js:12143) at beginWork (react-dom.evolution.js:12942) at HTMLUnknownElement.callCallback (react-dom.evolution.js:2746) at Object.invokeGuardedCallbackDev (react-dom.development.js:2770) at invokeGuardedCallback (react-dom.evolution.js:2804) at beginWork $ane (react-dom.evolution.js:16114) at performUnitOfWork (react-dom.evolution.js:15339) at workLoopSync (react-dom.development.js:15293) at renderRootSync (react-dom.development.js:15268) at performSyncWorkOnRoot (react-dom.development.js:15008) at scheduleUpdateOnFiber (react-dom.development.js:14770) at updateContainer (react-dom.development.js:17211) at eval (react-dom.development.js:17610) at unbatchedUpdates (react-dom.development.js:15104) at legacyRenderSubtreeIntoContainer (react-dom.development.js:17609) at Object.return (react-dom.evolution.js:17672) at evaluate (alphabetize.js:7) at z (eval.js:42) at 1000.evaluate (transpiled-module.js:692) at be.evaluateTranspiledModule (director.js:286) at be.evaluateModule (manager.js:257) at compile.ts:717 at l (runtime.js:45) at Generator._invoke (runtime.js:274) at Generator.forEach.e. < computed > [as side by side] (runtime.js:97) at t (asyncToGenerator.js:3) at i (asyncToGenerator.js:25) I wasn't kidding when I said you could ignore virtually of information technology! The first 2 lines are all we care about hither.
The start line is the error message, and every line subsequently that spells out the unwound stack of function calls that led to it.
Permit'south decode a couple of these lines:
Here we take:
-
Appis the name of our component function -
App.jsis the file where it appears -
9is the line of that file where the fault occurred
Let's look at another one:
at performSyncWorkOnRoot (react-dom.evolution.js:15008) -
performSyncWorkOnRootis the name of the part where this happened -
react-dom.development.jsis the file -
15008is the line number (information technology'southward a large file!)
Ignore Files That Aren't Yours
I already mentioned this just I wanted to country it explictly: when y'all're looking at a stack trace, you can almost ever ignore any lines that refer to files that are outside your codebase, like ones from a library.
Usually, that ways you'll pay attention to only the start few lines.
Scan downward the list until information technology starts to veer into file names you don't recognize.
There are some cases where yous do care about the total stack, merely they're few and far betwixt, in my experience. Things similar… if you suspect a bug in the library you're using, or if you think some erroneous input is making its way into library lawmaking and blowing upwards.
The vast majority of the fourth dimension, though, the bug will exist in your own lawmaking ;)
Follow the Clues: How to Diagnose the Error
So the stack trace told us where to expect: line 9 of App.js. Let'southward open that upward.
Here's the full text of that file:
import "./styles.css" ; export default function App () { allow items ; return ( < div className = "App" > < h1 > List of Items </ h1 > { items . map ( item => ( < div central = { item .id } > { particular .name } </ div > )) } </ div > ) ; } Line nine is this one:
And but for reference, here'southward that error message again:
TypeError: Cannot read property 'map' of undefined Let's break this downward!
-
TypeErroris the kind of error
There are a handful of congenital-in error types. MDN says TypeError "represents an fault that occurs when a variable or parameter is non of a valid type." (this function is, IMO, the to the lowest degree useful function of the error bulletin)
-
Cannot read propertyways the lawmaking was trying to read a holding.
This is a good clue! There are only a few ways to read properties in JavaScript.
The most common is probably the . operator.
As in user.name, to admission the name belongings of the user object.
Or items.map, to access the map belongings of the items object.
At that place's also brackets (aka foursquare brackets, []) for accessing items in an array, like items[5] or items['map'].
You might wonder why the error isn't more specific, like "Cannot read office `map` of undefined" – but recall, the JS interpreter has no thought what nosotros meant that type to be. Information technology doesn't know it was supposed to be an array, or that map is a function. Information technology didn't get that far, considering items is undefined.
-
'map'is the property the code was trying to read
This one is another great inkling. Combined with the previous bit, you can be pretty sure you should be looking for .map somewhere on this line.
-
of undefinedis a clue about the value of the variable
It would be style more useful if the error could say "Cannot read belongings `map` of items". Sadly it doesn't say that. It tells y'all the value of that variable instead.
So now you tin can piece this all together:
- find the line that the mistake occurred on (line 9, here)
- scan that line looking for
.map - expect at the variable/expression/whatever immediately earlier the
.mapand be very suspicious of it.
One time yous know which variable to expect at, you can read through the function looking for where it comes from, and whether it'southward initialized.
In our lilliputian example, the only other occurrence of items is line 4:
This defines the variable but it doesn't set up it to annihilation, which means its value is undefined. There's the problem. Ready that, and you set the fault!
Fixing This in the Existent Globe
Of course this example is tiny and contrived, with a simple error, and information technology'south colocated very close to the site of the error. These ones are the easiest to fix!
At that place are a ton of potential causes for an error like this, though.
Mayhap items is a prop passed in from the parent component – and you forgot to pass it down.
Or mayhap you did pass that prop, but the value beingness passed in is really undefined or zip.
If it's a local state variable, peradventure yous're initializing the country as undefined – useState(), written like that with no arguments, will do exactly this!
If it's a prop coming from Redux, maybe your mapStateToProps is missing the value, or has a typo.
Whatever the case, though, the process is the same: start where the error is and work backwards, verifying your assumptions at each signal the variable is used. Throw in some panel.logs or utilise the debugger to inspect the intermediate values and effigy out why it's undefined.
You'll become it fixed! Skillful luck :)
Success! At present check your email.
Learning React tin can exist a struggle — then many libraries and tools!
My communication? Ignore all of them :)
For a step-past-step approach, check out my Pure React workshop.
Larn to think in React
- ninety+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Developer interviews
Start learning Pure React at present
Dave Ceddia's Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front finish devs wanting to upskill or consolidate.
Alan Lavender
@lavenderlens
Source: https://daveceddia.com/fix-react-errors/
0 Response to "Gitkraken Pull Cannot Read Property Fullname of Undefined"
Post a Comment