Hey I have a React component that is using Axios to grab GeoJSON and then I'm displaying the Json data later.
here is the component
and here's the link to the geojson -> http://codeforcary.org/parking/business.geojson
upon trying to access the Data component here
link
I get 'undefined is not an object' on line 5 referring to 'return Data' so im guessing the request to the geojson url is not executing correctly.
I tried changing res.data to JSON.parse(res.data) in Data.js to no avail same error as well as trying to console.log res.data but nothing appears.
I'm guessing this is some sort of formatting error but I can't find in the geojson documentation exactly how u should treat .geojson.
maybe there is some sort of conversion method? thanks.
Related
I am building an application and am trying to show article content from mongoDB using axios, node.js, and express on a React frontend. I can pull the data to my redux store but when I try to display it I get a cannot read property 'author' (or whatever property in the state I'm going for) of undefined error.
Here are some screenshots of my react file, as well as the action and reducer. Let me know what other info you might need. Thanks a ton.Here is my React file. Here is the action. here is my reducer.
Because the initial of state is empty object {}. So while fetching API, state.articles is undefined and this issue occur.
You can fix by add condition before using with optional chaining
const articles = useSelector((state => state.articles);
const current = articles?.current ;
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...
I am working on a ReactJS Web application and got stuck in a problem. Problem is I have an array of URLs of some JSON data and I want to fetch all these JSON data from server using "useSWR" hook (so that the fetched data gets cached as well). Now the problem is as per the rules we cannot use hooks inside any loop or block.
Example -
What I have - ["http://someapi/a.json", "http://someapi/b.json", "http://someapi/c.json"]
What I want to do - iterate over this array and call these urls using useSWR hook, so that I have a list of [ JSON ObjectA, JSON ObjectB, JSON ObjectC ]
Why I am trying to use "useSWR" because I know, this data will not gonna change for 24Hours and I want to cache these values.
Can anyone suggest me how can I iterate over the list of URLs and make a call to the server using useSWR hook? And is there's some other optimized approach to solve this problem? Any help or guidance is highly appreciated.
One of the option i think is to create React FetchComponent with url prop and use the useSWR hook inside.
Render components as number of urls.
Something like this:
["http://someapi/a.json", "http://someapi/b.json", "http://someapi/c.json"].map(url=><FetchComponent url={url}/>)
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.
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(....)"