如何使组件消失然后在需要时重新出现？

Question

我试图建立一个小小的派对系统菜单，现在我有了＃34; In Queue＆＃34;组件制作，它看起来像这样：

s = stdscr.getstr(0,0, 15) #Input is limited to 15 characters, once the limit is hit, it stops accepting more

然后主应用程序组件如下所示：

import {EventEmitter} from 'events';
import React from 'react';

let ee = new EventEmitter();

class PartyQueueSection extends React.Component {
    constructor(props, ee) {
        super(props);
        this.state = {
         timeString: "0H : 0M : 0S",
         timeInterval: function(){},
         hours: 0,
         minutes: 0,
         seconds: 0,
         ee: ee
        }
    }
    startCounter() {
        this.props.setActiveReveal("InQueue");
        let {timeInterval, hours, minutes, seconds, timeString} = this.state;
        hours   = 0;
        minutes = 0;
        seconds = 0;
        timeString = "0H : 0M : 0S";
        timeInterval = setInterval(this.incrementCounter.bind(this), 1000);
        this.setState({timeInterval, hours, minutes, seconds, timeString});
    }
    stopCounter() {
        let {timeInterval} = this.state;
        clearInterval(timeInterval);
        timeInterval = null;
        this.setState({timeInterval});
        $('#PartyApp').foundation('close');
        this.props.setActiveReveal("Other");
    }
    incrementCounter() {
        let {timeString, hours, minutes, seconds} = this.state;
        ++seconds;
        if (seconds >= 60) {
            seconds = 0;
            ++minutes;
        }
        if (minutes >= 60) {
            minutes = 0;
            ++hours;
        }
        timeString = hours + "H : " + minutes + "M : " + seconds + "S";
        this.setState({timeString, hours, minutes, seconds});
    }
    componentDidMount() {
        ee.on('startCounter', this.startCounter.bind(this));
    }
    componentWillUnmount() {
        this.stopCounter();
    }
    render() {
        return (
            <div className="row">
                <div className="large-5 columns large-centered text-center">
                    <h2>You are in the queue</h2>
                    <h1>{this.state.timeString}</h1>
                    <br/>
                    <button className="button alert expanded" onClick={this.stopCounter.bind(this)}>Leave Queue</button>
                </div>
            </div>
        )
    }
}

$('#enterQueueButton').on('click', function(e) {
   e.preventDefault();
   ee.emit('startCounter'); 
});

export default PartyQueueSection;

但是当我点击＆＃34;离开队列＆＃34;然后单击＆＃34;输入队列＆＃34;我再次收到这条消息：

var ReactDOM = require('react-dom'); import React from 'react'; import PartyQueueSection from './PartyQueueSection.jsx'; class PartyApp extends React.Component { constructor(props) { super(props); this.state = { activeReveal: 'InQueue' } } setActiveReveal(name) { this.setState({activeReveal: name}); } render() { return ( <div> {(() => { switch(this.state.activeReveal) { case "InQueue": return <PartyQueueSection setActiveReveal={this.setActiveReveal.bind(this)} /> }; })()} </div> ) } } ReactDOM.render(<PartyApp/>, document.getElementById("PartyApp"))

所以我不确定它为什么会卸载，然后当我再次单击“输入队列”按钮时，它似乎与我第一次点击它时的工作方式相同：

简而言之，点击＆＃34;输入队列＆＃34;按钮，一切正常，我可以看到计时器计数和一切，然后我点击＆＃34;离开队列＆＃34;然后＆＃34;输入队列＆＃34;再次，它给了我上面的错误

我不知道是不是因为我使用Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.所以我可以在组件外部（在导航栏中）触发一个锚点，触发我的反应组件内的东西或者什么。任何信息都会非常感谢。

基本上我试图在一个揭示内部制作一个SPA风格的视图，我只希望队列显示当玩家在队列中时，我只希望派对组件显示，当玩家在一个聚会，等等