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

由于

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件

1 个答案: