TypeError: Cannot read properties of undefined (reading 'id')
Solution 1
What is happening:
The function itemToForm()
is being called before the this.item
is ready.
There are many strategies to avoid this error. A very simple one is to add a catcher at the beginning of the function, like this:
itemToForm = () => {
if(this.item === undefined) {return}
// The rest of the code
}
This stops the function, if the data does not exist yet.
A more elegant solution may be to go further up in your order of operations, and find who is calling itemToForm()
and ensure the data exists prior to calling.
Solution 2
I bumped to this question but my issue was actually something completely different.
In my code for some reasons I had
import { SOME_OBJECT } from '.';
which should instead be like this:
import { SOME_OBJECT } from './proper-file';
Related videos on Youtube
David Angarita
Updated on July 09, 2022Comments
-
David Angarita almost 2 years
I have this error in my terminal:
TypeError: Cannot read properties of undefined (reading 'id')
I'm trying to test the call to an API, but the error appears.
My function:
itemToForm = () => { this.api.send(this.component, 'get', { lang: 'ES', filter: { id: this.item['id'] } } ).then(resEsp => { this.item = resEsp['data'][0]; this.api.send(this.component, 'get', { lang: 'EN', filter: { id: this.item['id'] } } ).then(res => { let itemEng = res['data'][0]; let fields = this.formDef.map(register => register.filter( field => field['register_table'].indexOf('traduction') !== -1 ).map( field => field['field_name']) ).filter(register => register.length); fields = fields.length ? fields[0] : []; if (itemEng) { this.item = Object.keys(itemEng).reduce((obj, key) => { obj[key] = this.item[key]; if (fields.indexOf(key) !== -1) { obj[key + '_eng'] = itemEng[key]; } return obj; }, {}); } if (this.item) { this.setForm(); } }) }) }
My specification file:
it('should call api.send', () => { let spy1 = spyOn(api, 'send'); let item = { id: 1, name: 'test', } component.addItem(item); component.itemToForm(); expect(spy1).toHaveBeenCalled(); });
-
derpirscher almost 3 yearsseems like
this.item
isn't initialized yet in line 2 of your snippet. OrresEsp['data']
doesn't contain any elements, thusthis.item = resEsp['data'][0];
will setthis.item
again to undefined, which will throw an error in line 4 of your snippet. -
Wolf359 almost 3 yearsan index.ts file might also be the culprit. try to import directly (without using index.ts files) and see if the error resolves.
-
-
Michel Fernandes about 2 yearsPerfect! On Vue - with Vuetify - the issue occurs inside the library when we use a watch. Your solution protect from the problem. Thanks!
-
khollenbeck about 2 yearsSame here. Angular was blowing up in a random component saying cannot read property of undefined. Turns out, the import path was wrong.