下面是我的代码:

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(); 

所以我调用了wait()来等待1000ms。现在，如果我在 wait() 方法中添加一个警报，那么就会发生一件令人惊讶的事情，然后一旦我单击警报框的“确定”，数据就会出现。如果我删除警报，则加载数据将不再出现。

我检查了 API 正在加载并且响应也即将到来。

那么问题出在哪里呢。请帮我。我被困了很长时间。 :-(

请您参考如下方法:

看起来问题可能是您正在使用 componentDidMount，调用此函数和 getInitialState 之间存在一些延迟，因此我怀疑您存在竞争条件介于两者之间。

尝试使用 componentWillMount 而不是 componentDidMount。

像这样:

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