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()等待1000毫秒。现在，如果我添加一个alert at wait()方法然后在点击确定框的确定后数据即将发生，则会发生一件令人惊讶的事情。如果我删除了警报，那么加载数据就不再存在了。

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

所以问题是什么。请帮我。我被困了很长时间。： - （

Answer 1

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

尝试使用componentWillMount代替componentDidMount。

像这样：

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

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

React JS在页面加载数据上没有加载，但点击它的工作

1 个答案: