Cannot read property 'data' of undefined in React web

I'm working on a react web module, and i'm using charts in my pages, and each time i'm changing the filters I may get this msg "Cannot read property 'data' of undefined" or even data doesn't appear correctly, which is weird, as sometimes same data with same filters is working just fine but when an example i'm moving between products - filters- it happens this way and when i move slowly it doesn't show and data is shown correctly.

and as a hint the query which is getting data is slow.

any idea what could be causing the issue and how to improve it?

Hello Abeer.

Can you share the oml or a print of your screen so I can be sure of what you're describing?

It usually means the javascript is acting on invalid elements.

if you place the trouble element inside GetProduct.IsDataFetched (like the tables usually are) you can be sure that data is already available for it to work on 

Solution

Hello Abeer,

Personally, this is a type of error that I had in the past during the development of my last mobile application project and they are quite hard to solve. Sometimes, it was just the order of the widgets on the widget tree. Another times, I needed to redo the entire page.

Like Nuno said, it means that the JavaScript running on the device / browser is acting on invalid elements. In another words, this means that you are accessing or iterating on objects of the page that are no longer accessible in the DOM (Document Object Model).


Basically, this error happens when your code is changing variables (reacting) used directly on elements of the screen that are not accessible (usually hidden or no longer in the page).


Let me give you an example:

Back in the day, I had this page with a block containing a list of card movements and I had 2 types of cards: debit and credit. I had only one variable for the movements list. When I swapped from one type to the other, I was hiding / removing the list from the screen and iterating over it and I had that exact error. The solution was basically separate this logic in two different blocks, one for debit and one for credit, each one with their own list.


When you apply your filter, are you iterating over a variable used on an element / object that is hidden in the screen?


Kind regards,

Rui Barradas

Solution

Nuno Reis wrote:

Hello Abeer.

Can you share the oml or a print of your screen so I can be sure of what you're describing?

It usually means the javascript is acting on invalid elements.

if you place the trouble element inside GetProduct.IsDataFetched (like the tables usually are) you can be sure that data is already available for it to work on 

Hi Nuno,

Thanks for your reply, you'r point is valid, so in my case, I used a loading icon with an IF, so after fetching all data and creating the list and mapping data to chart the chart will then be visible, I was already manipulation data after being fetched so this alone wasn't enough, but it worked this way thanks.


Rui Barradas wrote:

Hello Abeer,

Personally, this is a type of error that I had in the past during the development of my last mobile application project and they are quite hard to solve. Sometimes, it was just the order of the widgets on the widget tree. Another times, I needed to redo the entire page.

Like Nuno said, it means that the JavaScript running on the device / browser is acting on invalid elements. In another words, this means that you are accessing or iterating on objects of the page that are no longer accessible in the DOM (Document Object Model).


Basically, this error happens when your code is changing variables (reacting) used directly on elements of the screen that are not accessible (usually hidden or no longer in the page).


Let me give you an example:

Back in the day, I had this page with a block containing a list of card movements and I had 2 types of cards: debit and credit. I had only one variable for the movements list. When I swapped from one type to the other, I was hiding / removing the list from the screen and iterating over it and I had that exact error. The solution was basically separate this logic in two different blocks, one for debit and one for credit, each one with their own list.


When you apply your filter, are you iterating over a variable used on an element / object that is hidden in the screen?


Kind regards,

Rui Barradas

Hi Rui,


Thanks for your reply, you'r point is valid, as I was just mentioning above how it's solved, and it's true the charts was using data that's being changed in the screen.

So thanks again for your reply.


Hi again Abeer,

Great news! I'm glad that you managed to solve it.


Kind regards,

Rui Barradas