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

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

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

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

Answer 1

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

尝试使用 componentWillMount 而不是 componentDidMount。

像这样:

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

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