反应组件未安装

Question

我的应用程序的反应如下：

<Route handler={RouteHandler}>
    <Route name="welcome" path="welcome" handler={WelcomePage} />
    <Route name="app" path="/" handler={Application}>
        <Route name="some-page" path="some-page" handler={SomePage} />
    </Route>
</Route>

主要的“应用”布局如下

export default class Application extends React.Component {
    render() {
        return (<div>
            <ModalView />
            <TopBar />
            <RouteHandler />
        </div>);
    }
}

给我的TopBar问题：

export default class TopBar extends React.Component {
    componentDidMount() {
        userStore.addChangeListener(this._onChange);
    }
    componentWillUnmount() {
        userStore.removeChangeListener(this._onChange);
    }
    _onChange = () => {
        this.setState(this.getState());
    };
    handleLoginClick() {
        actions.queueModal("login");
    }
    handleSignupClick() {
        actions.queueModal("signup");
    }
    getState() {
        return {
            currentUser: userStore.currentUser
        };
    }
    state = this.getState();
    render() {
        return (
            <div className="topBar">
                {this.state.currentUser ?
                    (<Link to="home"><button className="default">{this.state.currentUser.email}</button></Link>) :
                    ([
                        <button key={1} className="clear" onClick={this.handleSignupClick}>Sign up</button>,
                        <button key={2} className="clear" onClick={this.handleLoginClick}>Log in</button>
                    ])}
            </div>
        );
    }
}

根据“应用程序”布局，当我在某些页面中时，应该安装TopBar。 现在，当我完成登录时，userStore会发出一个更改，TopBar会收到更改。 而不是自动更新栏，我收到类似“警告：setState（...）：只能更新已安装或正在安装的组件的错误消息。这通常意味着您在未安装的组件上调用了setState（）。这是一个OP“。 为什么是这样？

Answer 1

看起来您没有组件TopBar的初始状态。 尝试在构造器中设置Intial状态。

   constructor(props) {
        super(props);
        this.state = {name: props.name};
    }

Answer 2

原来...被“卸载”的组件甚至都不是TopBar。 我像这样打开了一个模态：

export default class ModalView extends React.Component {
    componentDidMount() {
        notificationStore.addChangeListener(this._onChange);
    }
    componentWillUnmount() {
        notificationStore.removeChangeListener(this._onChange);
    }
    _onChange = () => {
        this.setState(this.getState());
    };
    getState() {
        return {
            modal: notificationStore.getModal(),
            test: 123
        };
    }
    state = this.getState();
    render() {
        if (!this.state.modal) {
            return <noscript />;
        }
        else {
            return (<div>
                <div className="modalBackground">
                    <LoginModal />
                    }
                </div>
            </div>);
        }
    }
}

这卸载了loginModal，后者也正在侦听userStore更新，因此“试图更新卸载的组件”。

故事的寓意是总是命名组件，以便更具体地显示错误消息： Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. Please check the code for the ExampleApplication component. This is a no-op. Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. Please check the code for the ExampleApplication component. This is a no-op.