React Render Is Choking On Nested Object In Property
I have this react component. It is passed a prop called data. data is an object like { 'title' : 'some title', 'meta' : { 'name': 'frank', 'last': 'lee'
Solution 1:
It looks as though data
is not necessarily set before render
fires. Since you set an initial (empty) data
property, when you call this.props.data.title
on the initial render, the value is null but it doesn't blow up because the object is sufficiently shallow. However, calling name
on an empty meta
property blows up, because meta
doesn't exist.
You've set loadData to use a promise, but that promise doesn't prevent the initial render of the component, where the error is occurring. Your best bet is to either render nothing until this.props.data.meta
has a value, or else hedge your name
variable, eg.
const name = this.props.data.meta && this.props.data.meta.name;
This will likely still flash undefined
, though it won't blow up.
Solution 2:
This is a very wild guess.. but what about a coma after the title value?
Post a Comment for "React Render Is Choking On Nested Object In Property"