Phaser Cannot Read Property 'mask' of Undefined
Got an error like this in your React component?
Cannot read property `map` of undefined
In this post we'll talk about how to fix this i specifically, and along the style you'll learn how to approach fixing errors in full general.
We'll encompass how to read a stack trace, how to interpret the text of the mistake, and ultimately how to fix it.
The Quick Set
This error unremarkably means you lot're trying to use .map on an array, but that array isn't divers nevertheless.
That'south often because the array is a piece of undefined land or an undefined prop.
Brand sure to initialize the state properly. That ways if information technology will somewhen exist an array, employ useState([]) instead of something like useState() or useState(null).
Let's expect at how nosotros can translate an fault message and rails down where it happened and why.
How to Discover the Error
Commencement club of business organization is to effigy out where the fault is.
If you're using Create React App, it probably threw up a screen like this:
TypeError
Cannot read belongings 'map' of undefined
App
half dozen | render (
7 | < div className = "App" >
viii | < h1 > List of Items < / h1 >
> ix | {items . map((particular) => (
| ^
ten | < div key = {item . id} >
11 | {item . name}
12 | < / div > Look for the file and the line number first.
Here, that's /src/App.js and line 9, taken from the lite greyness text above the code block.
btw, when yous encounter something similar /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 console instead, you lot'll demand to read the stack trace to figure out where the error was.
These always look long and intimidating, simply the trick is that unremarkably y'all can ignore most of it!
The lines are in order of execution, with the virtually recent first.
Here's the stack trace for this error, with the only important lines highlighted:
TypeError: Cannot read holding 'map' of undefined at App (App.js:9) at renderWithHooks (react-dom.development.js:10021) at mountIndeterminateComponent (react-dom.development.js:12143) at beginWork (react-dom.development.js:12942) at HTMLUnknownElement.callCallback (react-dom.development.js:2746) at Object.invokeGuardedCallbackDev (react-dom.development.js:2770) at invokeGuardedCallback (react-dom.development.js:2804) at beginWork $1 (react-dom.development.js:16114) at performUnitOfWork (react-dom.development.js:15339) at workLoopSync (react-dom.development.js:15293) at renderRootSync (react-dom.evolution.js:15268) at performSyncWorkOnRoot (react-dom.development.js:15008) at scheduleUpdateOnFiber (react-dom.evolution.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.evolution.js:17609) at Object.render (react-dom.development.js:17672) at evaluate (index.js:7) at z (eval.js:42) at G.evaluate (transpiled-module.js:692) at be.evaluateTranspiledModule (director.js:286) at exist.evaluateModule (manager.js:257) at compile.ts:717 at 50 (runtime.js:45) at Generator._invoke (runtime.js:274) at Generator.forEach.due east. < computed > [as next] (runtime.js:97) at t (asyncToGenerator.js:3) at i (asyncToGenerator.js:25) I wasn't kidding when I said yous could ignore most of it! The starting time 2 lines are all we care almost here.
The starting time line is the error message, and every line later on that spells out the unwound stack of function calls that led to it.
Let's decode a couple of these lines:
Hither we have:
-
Appis the proper noun of our component part -
App.jsis the file where it appears -
9is the line of that file where the fault occurred
Let's look at some other ane:
at performSyncWorkOnRoot (react-dom.development.js:15008) -
performSyncWorkOnRootis the name of the function where this happened -
react-dom.evolution.jsis the file -
15008is the line number (it's a big file!)
Ignore Files That Aren't Yours
I already mentioned this but I wanted to country it explictly: when you're looking at a stack trace, y'all tin nearly always ignore any lines that refer to files that are outside your codebase, like ones from a library.
Ordinarily, that means you'll pay attention to but the first few lines.
Scan downwardly the list until it starts to veer into file names you don't recognize.
In that location are some cases where yous practice care nearly the full stack, just they're few and far between, in my experience. Things like… if you suspect a bug in the library you lot're using, or if y'all recall some erroneous input is making its manner into library code and bravado up.
The vast majority of the time, though, the bug will be in your own code ;)
Follow the Clues: How to Diagnose the Error
And so the stack trace told us where to await: line nine of App.js. Let's open that up.
Hither's the full text of that file:
import "./styles.css" ; consign default part App () { let items ; return ( < div className = "App" > < h1 > Listing of Items </ h1 > { items . map ( item => ( < div fundamental = { detail .id } > { detail .proper name } </ div > )) } </ div > ) ; } Line 9 is this one:
And simply for reference, here's that error bulletin once again:
TypeError: Cannot read belongings 'map' of undefined Let's intermission this down!
-
TypeErroris the kind of fault
There are a handful of born error types. MDN says TypeError "represents an error that occurs when a variable or parameter is not of a valid blazon." (this part is, IMO, the least useful office of the error bulletin)
-
Cannot read propertymeans the code was trying to read a property.
This is a good inkling! In that location are simply a few means to read properties in JavaScript.
The most mutual is probably the . operator.
As in user.name, to access the name property of the user object.
Or items.map, to admission the map holding of the items object.
At that place's also brackets (aka square 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 function `map` of undefined" – but recall, the JS interpreter has no thought what we meant that blazon to exist. It doesn't know it was supposed to be an array, or that map is a part. It didn't go that far, because items is undefined.
-
'map'is the property the lawmaking was trying to read
This one is another bang-up clue. 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
Information technology would exist way more useful if the error could say "Cannot read belongings `map` of items". Sadly information technology doesn't say that. Information technology tells you the value of that variable instead.
And then now you tin slice this all together:
- find the line that the fault occurred on (line 9, here)
- browse that line looking for
.map - look at the variable/expression/any immediately earlier the
.mapand be very suspicious of it.
Once y'all know which variable to look at, you lot tin read through the function looking for where it comes from, and whether it's initialized.
In our fiddling example, the only other occurrence of items is line 4:
This defines the variable but it doesn't set information technology to annihilation, which ways its value is undefined. There'southward the problem. Fix that, and you fix the error!
Fixing This in the Real Globe
Of course this instance is tiny and contrived, with a unproblematic mistake, and it's colocated very close to the site of the error. These ones are the easiest to gear up!
There are a ton of potential causes for an error like this, though.
Maybe items is a prop passed in from the parent component – and yous forgot to pass it down.
Or possibly y'all did pass that prop, just the value being passed in is actually undefined or null.
If it's a local state variable, maybe you're initializing the land as undefined – useState(), written like that with no arguments, will exercise exactly this!
If information technology'southward a prop coming from Redux, maybe your mapStateToProps is missing the value, or has a typo.
Any the case, though, the procedure is the aforementioned: showtime where the fault is and piece of work backwards, verifying your assumptions at each point the variable is used. Throw in some console.logs or employ the debugger to inspect the intermediate values and figure out why it'southward undefined.
You'll get information technology fixed! Good luck :)
Success! At present check your email.
Learning React can be a struggle — so many libraries and tools!
My communication? Ignore all of them :)
For a pace-by-pace approach, check out my Pure React workshop.
Learn to think in React
- 90+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Programmer 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 forepart devs wanting to upskill or consolidate.
Alan Lavender
@lavenderlens
Source: https://daveceddia.com/fix-react-errors/
0 Response to "Phaser Cannot Read Property 'mask' of Undefined"
Post a Comment