React JS on page load data not getting loaded, however on click its working

Question

Below is my code:

var CommonHeader = require('./header/CommonHeader.jsx');
var ListOptions = require('./header/ListOptions.jsx');
var SortableTable = require('../shared/SortableTable.jsx');
var ColumnDefinition = require('../shared/SortableTable/ColumnDefinition.jsx');

var DashboardApiActions = require('../../actions-api/DashboardApiActions');

var DashboardStore = require('../../stores/DashboardStore');

function constructList(data) {
    var clickFunction = function(dashboardId, e) {
        e.preventDefault();
        DashboardApiActions.getDetail(dashboardId);
    };

    return data.map(function(row) {
        return {
            name : <a href="#" onClick={clickFunction.bind(this, row.id)}>{row.name}</a>,
            createdBy : row.createdBy,
            shared: "Share to everyone",
            popularity: 20 
        };
    });
}

function getState() {
    return {
        selectedTab: 'dashboard',
        pageMetaData : DashboardStore.getPageMetaData(),
        hasNextPage : DashboardStore.hasNextPage()
    };
}

var List = React.createClass({
    getInitialState: function() {
        return getState();
    },

    handleDashboard: function() {
        this.setState({
            selectedTab: 'dashboard'
        });
    },

    handleFav: function() {
        this.setState({
            selectedTab: 'fav'
        });
    },

    handlePopular: function() {
        this.setState({
            selectedTab: 'popular'
        });  
    },

    wait: function(ms) {
        alert('hi');
       var start = new Date().getTime();
       var end = start;
       while(end < start + ms) {
         end = new Date().getTime();
      }
    },

    getDetails() {
        var nextPageListener = this.state.hasNextPage ? this.handleNextPage : null;

        if(this.state.selectedTab === 'dashboard') {
            this.wait(1000);  
            var details = DashboardStore.getList();
            console.log(details);

            return (
                <SortableTable data={constructList(details)} nextPageListener={nextPageListener} >
                    <ColumnDefinition dataField="name">Name</ColumnDefinition>
                    <ColumnDefinition dataField="createdBy">Owner</ColumnDefinition>
                    <ColumnDefinition dataField="shared">Shared With</ColumnDefinition>
                    <ColumnDefinition dataField="popularity">Popularity</ColumnDefinition>
                </SortableTable>
            );    
        } else if(this.state.selectedTab === 'fav') {
            return(
                <div className="col-md-12">
                    <span>Nothing to show</span>
                </div>
            );
        } else if(this.state.selectedTab === 'popular') {
            return(
                <div className="col-md-12">
                    <span>Nothing to show</span>
                </div>
            );
        }
    },

    _onChange : function() {
        this.setState(getState());
    },

    componentDidMount : function() {
        DashboardStore.addChangeListener(this._onChange);
    },

    componentWillUnmount : function() {
        DashboardStore.removeChangeListener(this._onChange);
    },

    handleNextPage : function () {
        var currPage = this.state.pageMetaData.pageNumber ? this.state.pageMetaData.pageNumber : 0;

        DashboardApiActions.getDashboards(currPage + 1);
    },

    render: function(){
        return(
            <div id="dashboard">
                <CommonHeader title={"Dashboard"} options={<ListOptions />} 
                    handlePopular={this.handlePopular}
                    handleDashboard={this.handleDashboard}
                    handleFav={this.handleFav}/>
                {this.getDetails()}                
            </div>
        );
    }
});

module.exports = List;

I have 3 tabs. On click of each I need to show some table data. On load My dashboard is selected. The issue is on load table is empty but if I click on some other tab and then again click on My dashboard tab then data is coming.

After debugging thoroughly I understood the problem is time issue, after 1000ms data is coming here -

var details = DashboardStore.getList();

so I called wait() to wait for 1000ms. Now one surprising thing is happening if I add one alert at wait() method then data is coming once I click on ok of alert box. If I remove the alert then on load data not coming anymore.

I checked API is hitting on load and response also coming.

so whats the issue. Please help me. I am stuck for a long time. :-(

Answer 1

It looks like the issue might be that you are using componentDidMount, there is some delay between this function being called and getInitialState so I suspect that you have a race condition between those 2.

Try using componentWillMount instead of componentDidMount.

Like so:

componentWillMount : function() {
    DashboardStore.addChangeListener(this._onChange);
},

componentWillUnmount : function() {
    DashboardStore.removeChangeListener(this._onChange);
},