React js-page无法在渲染中获得实际状态

时间:2017-04-03 12:37:12

标签: reactjs

我是新手,我的应用程序中有一个奇怪的错误。在页面加载时,应用程序会检查用户是否有某些订阅的测试,是否显示相应的测试,否则会出现错误而不是未找到测试。页面最初显示没有错误消息,然后加载测试,这是奇怪的。请帮忙

export default class PlaytestsIndex extends React.Component {
constructor (props, context) {
    super(props, context);
    this._onPlaytestStoreChange = this._onPlaytestStoreChange.bind(this);
    this.state = {
        playtests: PlaytestStore.getActivePlaytests()
    };
}

componentDidMount () {
    PlaytestStore.addChangeListener(this._onPlaytestStoreChange);
}

componentWillUnmount () {
    PlaytestStore.removeChangeListener(this._onPlaytestStoreChange);
}

_onPlaytestStoreChange () {
    this.setState({
        playtests: PlaytestStore.getActivePlaytests()
    });
}

render () {
    const playtests = this.state.playtests;
    if (playtests.length === 0) {
        return (
            <table className="table table-fixed content-section">
                <tbody>
                <tr className="disabled">
                    <td className="no-results center">No playtests found</td>
                </tr>
                </tbody>
            </table>
        );
    }

    const today = Moment().minute(0).hour(0).second(0).millisecond(0);
    // how the groups of playtests are sorted
    const sortOrderLabels = [
        'Currently Active',
        'Upcoming'
    ];

    const timelineDateRows = _.chain(playtests)
        .groupBy((playtest) => {
            const startsOn = Moment(playtest._startsOnDateTime).minute(0).hour(0).second(0).millisecond(0);
            if (today.isAfter(startsOn) || today.isSame(startsOn, 'day')) {
                return 0;
            }
            return 1;
        })
        .toPairs() // [[idx, playtests], ...]
        .sortBy((paired) => paired[0]) // by idx
        .map((paired) => {
            const [idx, playtests] = paired;
            return (<TimelineDateRow key={sortOrderLabels[idx]} label={sortOrderLabels[idx]} playtests={playtests}/>);
        })
        .value();

    return (
        <div>
            {timelineDateRows}
        </div>
    );
}

}

0 个答案:

没有答案