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(....)"
Related
I am using https://www.npmjs.com/package/opengraph-react
It says if the prop onlyFetch is supplied then no card will display, but instead the results from opengraph will be passed as props to the components children.
However, I do not know how to get hold of the data?
My code is
<OpengraphReactComponent
site={comment.url}
appId={"myapistring"}
size={'small'}
onlyFetch={'true'}
/>
The console shows data from their console.log but I can't work out a way to access the data returned?
I have tried console.log(this.props.children) within the component which is just empty
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 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.
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.
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.