title: Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
body: <p>I'm getting this warning:</p>
  
  <pre><code>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. Please check the code for the App component.    
  </code></pre>
  
  <p>There is also a problem where it seems to have mounted a component twice after I've done the signup. Then 3 times if I do another signup. How can I fix this? For example if I enter a message it is printed twice or three times.</p>
  
  <pre><code>var App = React.createClass({
          getInitialState: function() {
              return { messages: AppStore.getMessages() };
          },
          componentDidMount: function() {
              var socket = io('http://localhost:3000');
              AppStore.addChangeListener(this._onChange);
              AppStore.addSocket(socket);
          },
          componentUnmount: function() {
              AppStore.removeChangeListener(this._onChange);
          },
          render: function() {
              return (
                  &lt;div&gt;
                      &lt;ChannelsColumn/&gt;
                      &lt;Messages messages={this.state.messages}/&gt;
                      &lt;div className="footer"&gt;
                          &lt;MessageInput/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          },
          _onChange: function() {
              this.setState({ messages: AppStore.getMessages() });
          }
      });
  
  Signup.js
  
      var Signup = React.createClass({
          getInitialState: function() {
              return {
                  email: '',
                  password: ''
              };
          },
          onChangeEmail: function(e) {
              this.setState({ email: e.target.value });
          },
          onChangePassword: function(e) {
              this.setState({ password: e.target.value });
          },
          handleSubmit: function() {
              var self = this;
              axios.post('/signup', { email: this.state.email, password: this.state.password })
                  .then(function(response) {
                      sessionStorage.setItem('token', response.data.token);
                      self.props.history.push('/');
                  });
          },
          render: function() {
              return (
                  &lt;div&gt;
                      &lt;header id="signup-header"&gt;
  
                      &lt;/header&gt;
  
                      &lt;form id="signup-form"&gt;
                          &lt;section className="form-content"&gt;
                              &lt;input type="text" placeholder="Email" value={this.state.email} onChange={this.onChangeEmail}/&gt;
                              &lt;input type="password" placeholder="Password" value={this.state.password} onChange={this.onChangePassword} id="password-field"/&gt;
                          &lt;/section&gt;
                          &lt;div className="button-container"&gt;
                              &lt;div type="submit" className="large-blue-button" onClick={this.handleSubmit}&gt;Sign Up&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
              )
          }
      });
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>ReactDOM.render((
      &lt;Router&gt;
          &lt;Route path="/" component={App} /&gt;
          &lt;Route path="login" component={Login} /&gt;
          &lt;Route path="signup" component={Signup} /&gt;
      &lt;/Router&gt;),
      document.getElementById('app')
  );
  </code></pre>