警告：setState（...）：只能更新已安裝或已安裝的組件。這通常意味着你叫的setState（）卸載的組件

Question

我得到這樣的警告上：

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.  

還有它似乎已經安裝我已經做了註冊後兩次組件中的問題。然後，如果我再次註冊，則爲3次。我怎樣才能解決這個問題？例如，如果我輸入消息，則會打印兩次或三次。

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 (
       <div> 
        <ChannelsColumn/> 
        <Messages messages={this.state.messages}/> 
        <div className="footer"> 
         <MessageInput/> 
        </div> 
       </div> 
      ) 
     }, 
     _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 (
       <div> 
        <header id="signup-header"> 

        </header> 

        <form id="signup-form"> 
         <section className="form-content"> 
          <input type="text" placeholder="Email" value={this.state.email} onChange={this.onChangeEmail}/> 
          <input type="password" placeholder="Password" value={this.state.password} onChange={this.onChangePassword} id="password-field"/> 
         </section> 
         <div className="button-container"> 
          <div type="submit" className="large-blue-button" onClick={this.handleSubmit}>Sign Up</div> 
         </div> 
        </form> 

       </div> 
      ) 
     } 
    }); 

main.js

ReactDOM.render((
    <Router> 
     <Route path="/" component={App} /> 
     <Route path="login" component={Login} /> 
     <Route path="signup" component={Signup} /> 
    </Router>), 
    document.getElementById('app') 
); 

Answer 1

你有錯字，React可是沒有像componentUnmount這樣的方法應該是componentWillUnmount。 React docs

謝謝