Javascript 未安装的反应组件

我的react应用程序的路由如下：

<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>);
    }
}

导出默认类应用程序扩展React.Component{
render（）{
返回(
);
}
}

给我带来问题的顶栏：

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扩展React.Component{
componentDidMount（）{
userStore.addChangeListener（this.\u onChange）；
}
组件将卸载（）{
userStore.removeChangeListener（this.\u onChange）；
}
_onChange=（）=>{
this.setState（this.getState（））；
};
handleLoginClick（）{
actions.queueModal（“登录”）；
}
handleSignupClick（）{
行动。队列模式（“注册”）；
}
getState（）{
返回{
currentUser:userStore.currentUser
};
}
state=this.getState（）；
render（）{
返回(
{this.state.currentUser？
（{this.state.currentUser.email}）：
([
注册
登录
])}
);
}
}

根据“应用程序”布局，当我在某个页面时，应该安装顶栏。

---

现在，当我完成登录时，userStore将发出一个更改，该更改由TopBar接收。我没有更新工具栏本身，而是收到一条错误消息，如“警告：设置状态（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了设置状态（）。这是一个不可操作的操作。“这是为什么？

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

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

---

结果是。。。“卸载”的组件甚至不是顶栏。这是一个模态，我是这样打开的：

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>);
        }
    }
}

导出默认类ModalView扩展React.Component{
componentDidMount（）{
notificationStore.addChangeListener（this.\u onChange）；
}
组件将卸载（）{
notificationStore.removeChangeListener（this.\u onChange）；
}
_onChange=（）=>{
this.setState（this.getState（））；
};
getState（）{
返回{
模态：notificationStore.getModal（），
测试：123
};
}
state=this.getState（）；
render（）{
if（！this.state.modal）{
返回；
}
否则{
返回(
}
);
}
}
}

这卸载了LoginModel，LoginModel也在侦听userStore更新，因此“尝试更新卸载的组件”

这个故事的寓意是始终命名组件，以便错误消息更具体：

---

警告：设置状态（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。请检查ExampleApplication组件的代码。这是一个禁止操作。

您不能通过检查来删除警告。根据React文档，在（getInitial）状态下使用道具是一种反模式：可能有点晚，但。。。上面发布的代码具有

componenetWIllUnmount

功能，因此您发布了更正的代码，对吗？