しかし上、ロードされ得ていないページの読み込みデータにJSを反応させるの下にその作業

Question

をクリックして私のコードです：

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; 

私は3つのタブがあります。それぞれをクリックすると、いくつかの表データを表示する必要があります。ロード時マイダッシュボードが選択されています。ロードテーブルの問題は空ですが、他のタブをクリックして再び[マイダッシュボード]タブをクリックすると、データが表示されます。

徹底的にデバッグした後、私は問題を理解1000msでデータがここに来た後、時間の問題である -

var details = DashboardStore.getList(); 

ので、私は1000ミリ秒を待つためにwait()と呼ばれます。私が1つのalert at wait()メソッドを追加した後、データが一度来たら、驚くべきことが起こっています。アラートを削除すると、データがロードされなくなります。

私はAPIが負荷で応答していることを確認し、応答も来ています。

この問題は何ですか？私を助けてください。私は長い間立ち往生しています。 :-(

Answer 1

はそれは問題はあなたがcomponentDidMountを使用していることかもしれないように、この呼び出される機能とgetInitialStateの間にいくつかの遅延があるので、私はあなたがそれらの2

間の競合状態が使用してみてくださいしていることを疑うに見えますcomponentWillMount代わりのcomponentDidMountので、同様

：。？。私はcomponentWillMountで行う必要があるそして、あなたは右の問題は時間についてですが何であるか

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

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