反應組件未安裝

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.