I am doing a react application and I want to fetch data from an api using the useEffect hook. I am receiving the data, but I am having trouble when trying to display 1 of the items in the received object. I have no problem displaying the other items from the data that I want.
When I look at the returned data in the console I see that the property I am trying to display (and gives me error) is actually object nested inside an array.
The error that I get is "TypeError: Cannot read property '0' of undefined"
I think that the problem is that not all data is loaded in the time when it renders, but not sure how to handle this. The problem is the "coinData.description[0]". Is my approach correct
Here is my component:
Componet First Part
Compoent Second Part
The problem is on row 36 in the second picture
Thanks in advance !
The setCoinData will set the whole answer of your request.
The problem is that property does not exist or that you are trying to render before your fetch was finished.
For the first case you can check the answer with a console.log().
In the second case you can use optional chaining to avoid this error.
Related
I'm new in reactjs. I'm creating a movie web with redux thunk. At home container, I use axios to call API to get a list of movie data and save it in store.
My home container has a carousel component gets that data on store by useSelector and loop it to render many carousel items. The problem is here. The initial data state in store is null, and while my app call API, carousel component still maps it and get error there:
TypeError: Cannot read property 'map' of null
I have solved this with ? syntax: data?.map()... and don't get that error.
I wonder may we have any solution better than mine? I mean it can waiting until the fetch data success instead of using ?. in any component.
Thank you if anyone help me some solution. You can just give me some key word or library, which is used in real project. I will study to import myselt.
Thank you
use empty array instead of null, as initial state of movie store is empty.
Using ? is the shortest way or you can put an if condition to check the movies array is null or not. something like if(moviesArr !== null) //do the rest...
Help me pls with this issue:
I'am using mobx-state-tree + React + mobx + Socket.io ,i'm writing chat for project,and using for connection socket.io
From server i get chats list and then put him to mobx-state-tree store using action,then i want get data from mobx-state-tree store and use map function for render elements
But,i catch two errors
This is my mobx-state-tree model for chat
enter image description here
this is my code where i trying to maping data
enter image description here
this is issue
enter image description here
But error "user" undefined is very stranger,because when i use console.log() for display data,array has this data and displayed in console
Okay,i find problem with Reaction[observerobserved] this happens because component which render chat list was not wrapped into observer function
But i'm still have problem with undefined props of array when i call map method on him
Resolve for |Reaction[observerobserved]"
Need wrapped component into observer() function for subscribing on changes
For second problem, with undefined prop:
first solution wrong on the screen, because you try get undefined index in this case 'item.chat_users[index]", solution is use map for chat_users array to, and then render inner item for this data "item.chat_users.map(....)"
I want to warn user when user is trying to navigate away from the page(components) making some changes .so I implemented using this article https://medium.com/front-end-weekly/angular-how-keep-user-from-lost-his-data-by-accidentally-leaving-the-page-before-submit-4eeb74420f0d,but I am getting this error
“Uncaught(in promise):TypeError:Cannot read property ‘submitted’ of
undefined” and “Uncaught(in promise):TypeError:Cannot read property
‘dirty’ of undefined” when I was trying to navigate from the component
without making changes.
Could someone please help me with this.Trying to solve this error from 2 days.
Thanks
ps:these errors are coming from can-deactivate method.
case 1:This basically happens when the code is not able to reach your form. In some apps there are some forms which will display when you click some buttons or perform any actions,Otherwise the form will not be there in that page.So whenever you are checking (this.form.submitted or this.form.dirty) make sure form is present.So just add one if statement like this:
if(this.form){
if(this.form.submitted || !this.form.dirty){
return true;
}
}
case 2:This will also happens when you don't implement abstract methods/accessors in your component.
I'm working with ReactJS on a project and using KnexJS to access a database. I would like to store and use the JSON objects I retrieve, in the state of a component as something along the lines of the following.
this.setState({tutors: tutors}) //Retrieval from database after promise
and then access their properties like so
this.state.tutors[0].email
this.state.tutors[0].firstname
However, when I try this, I get the following error
TypeError: Cannot read property 'email' of undefined
I have checked the console.log as well as using JSON.stringify to determine if the objects are retrieved by the time I need them. And it appears that they are. I simply cannot access their properties from state.
Is there something I can do about this? Or do I need to retrieve them from the DB one by one?
This could be happening, because at the moment your code tries to retrieve data from state, the data is not there yet -- though it's possibly added later. This is something that happens quite often, in my experience. You should probably check that an object exists, before trying to access a property on it -- and return null or undefined in case it doesn't exist:
this.state.tutors[0] ? this.state.tutors[0].email : null
EDIT (in response to the additional code samples):
Assuming your fetch function works ok and adds the fetched data to state (I would use forEach instead of map to push the elements into the array, or just map over the fetched array and add that to the state directly, without an intermediary array/variable/push -- but I think your code should work)...
The problem has to do with the render method, since when the component renders initially the data is not yet in state, and as such you're passing an empty array to the TutorTable component, which probably in turn produces the error you see.
The data gets added to state later, but at this stage the error on the initial render has already happened.
You could solve this by rendering the TutorTable conditionally, only when the data gets added to the state:
<div className="col-7">
<h3> My Tutors </h3>
{this.state.tutors.length > 0 && <TutorsTable tutors={this.state.tutors} />}
</div>
if you console.log out this.state.tutors in the render() method you should see in the console an empty array ([]) returned on the initial render, and then an array filled with data when the component re-renders when the data is added to the state.
I hope this helps.
It appears to me you are trying to get the first element of an array this.state.tutors[0].email
is the tutors really an array,could provide the format of the data that you console logged as you stated.This probably should be in the comment section but I have less than 50 rep so i cant comment.
you should check first tutors. if you are getting tutors an array then you can access its first element.
if(this.state.tutors[0]) {
console.log("first element of tutors array", this.state.tutors[0].email)
// anything you can acccess now of this element
}
and assign first tutors as an empty array in state.
state = {
tutors: []
}
in first lifecycle you have no data in this.state.tutors[0]
for this reason first check this.state.tutors[0] is ready or not like this
if(this.state.tutors[0])
{
var data=this.state.tutors[0];
data.push('your data');
this.setState({tutors:data})
}
I'm making a react app using antd, I'm trying to add modal but it doesn't work, every time I click the trigger button I got errors saying "Uncaught Error: Element ref was specified as a string (header) but no owner was set. You may have multiple copies of React loaded.". Im following this syntax from https://ant.design/components/modal/
I found related problem https://github.com/jrm2k6/react-markdown-editor/issues/55
and according to react
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
they dont recommend using ref attribute, instead use a callback pattern.
I dont know what to do..
Any help, thanks.