Reactjs- countering undefined error in referencing state sub elements in render methods

Question

I run frequently into problem while using React in a specific way.

I have a hierarchy of components. The application state lives in the common owner uppermost component. I set initial state with empty objects, or arrays whatever in getInitialState. I fetch data via ajax with calling a method of this state owner uppermost component in this component's componentDidMount. But whether I use the state set in the success callback of the ajax call in this same component, or in sub components, by passing the state to them via props, I almost always get a variable can't find or something undefined sort of errors.

Thinking conceptually, the render method invoked when I mount the components, so it will not find data in the variables embedded in it. But we have getInitialState. This seems ok but what if the nested objects are being used in the render methods. States in the getInitialState are just empty objects, so references to the to be sub elements are undefined.

Even using componentWillMount does not work. Only way seems having initial states and not to reference any undefined sub elements of those in the render. However it seems necessary in most cases. Is the issue related to this necessity I see being actually an anti-pattern.

I have found React very useful for me at first tutorials and simpler cases, but now I cannot make use of it efficiently.

How to counter this behaviour correctly and in the best practice possible?

François Richard François Richard · Accepted Answer · 2015-09-17T00:37:16

FIRST SOLUTION: The method I use is simply check is the state exists in the render function

render: function() {
    var result = { this.state.field ?
        this.state.field.embeddedfield ?
            <div> this.state.field.embeddedfield </div>
        : <div> Data are loading! </div>

      : "" }
    return {result};
}

SECOND SOLUTION If you want your data to be ready before rendering you need to execute the first fetch outside :

  $.ajax({...}).success(function(res) {
         <MyView data={res} /> // render your function on success
    });

See this : bind(this) not working on ajax success function

To answer about why componentWillMount won't work:Putting ajax call in componentWillMount won't work because it won't wait for your call to be fetched and cycle concurrency may also occurs.

Reactjs- countering undefined error in referencing state sub elements in render methods

1 Answers