While rendering a list data, I got an error: ‘react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child(found: object with keys {id, typeId, reference, …..}). If you meant to render a collection of children, use an array instead.’

I used React Hooks to fetch data and ‘antd’ version 3.13 as my UI library, List and List.Item are supported by antd. I want to see the raw data so I just simply use a div tag to render the data, but I got an error from the code showing below



And, here is the error



Through the network request I found that this page is broken before it sends the request to fetch data, I was curious about that because this data works as expected in other pages. Also, I knew that useEffect() triggered when your component needs to do something after render. (Using the Effect Hook)

So, I knew that the error happened during render List, I modify the code as below which render the list with object’s property rather than the whole object, it worked.



Here is the outcome


Any feedback is welcome! :-)



blog comments powered by Disqus

Published

2019-06-03

Categories


Tags