Reactjs 反应+；Redux-组件不'；状态更改后无法更新

嗨，我有一个React+Redux应用程序。它由标题和登录表单组成。用户成功登录后，我希望在标题中显示注销按钮。然而，现在它似乎在登录操作发生之前呈现标题，除非我刷新页面，否则不会显示注销按钮

我的登入表格

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit = (e, {setFieldError, setSubmitting}) => {
        const {username, password} = e;
        if (username && password) {
            loginService
                .login(username, password)
                .then(
                    success => {
                        const data = success.data;
                        if (success.status === 200 && data.success === true) {
                            return {...data.user, password: password};
                        } else if (success.status === 400) {
                            window.location.reload();
                        }
                        const error = (!data.success && "Wrong credentials") || success.statusText;
                        return Promise.reject(error);
                    }
                )
                .then(
                    auth => {
                        this.props.login(auth)
                    },
                    error => {
                        if (error.response.status === 400) {
                            setFieldError("username", "Zły login lub hasło");
                            setFieldError("password", "   ");
                            setSubmitting(false);
                        }
                    }
                )
        }
    };

    render() {
        return (
            <Formik ...
        )
}


function mapState(state) {
    const {session} = state;
    return {session}
}

const connectedLoginForm = connect(mapState, {login: loginActions.login})(LoginForm);
export {connectedLoginForm as LoginForm};

我的登录名

const session = loginService.getSessionData();
const initialState = session ? {session} : {};

export function login(state = initialState, action) {
    if (action.type === loginConstants.LOGGED_IN) {
        return {
            session: action.payload
        };
    } else {
        return state
    }
}

未正确呈现的我的头类

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogged: this.props.isLogged,
            showText: true
        };
        this.updatePredicate = this.updatePredicate.bind(this);
    };

    componentDidMount() {
        this.updatePredicate();
        window.addEventListener("resize", this.updatePredicate);
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.updatePredicate);
    }

    updatePredicate() {
        this.setState({showText: window.innerWidth > 319});
    }

    render() {
        return (
            <MDBNavbar color="white" light expand="md" className={'mt-0'} style={{marginTop: "0px"}} fixed={'top'}>
                <MDBNavbarBrand href={'/'}>
                    <img alt="Logo" src={logo} width="30" height="30" className="d-inline-block align-top"/>
                    <strong id="app-name">
                        {AppName}
                    </strong>
                </MDBNavbarBrand>
                {this.state.isLogged &&
                <MDBNavbarNav right>
                    <MDBNavItem>
                        <MDBNavLink to="/logout">
                            <MDBIcon icon="sign-out-alt"/>
                            {this.state.showText && <span>Wyloguj się</span>}
                        </MDBNavLink>
                    </MDBNavItem>
                </MDBNavbarNav>
                }
            </MDBNavbar>
        );
    }
}

function mapState(state) {
    const {session} = state.login;
    return {isLogged: !(typeof session === 'undefined')}
}

const connectedHeader = connect(mapState)(Header);
export {connectedHeader as Header};

类头扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isLogged:this.props.isLogged，
showText:true
};
this.updatePredicate=this.updatePredicate.bind（this）；
};
componentDidMount（）{
this.updatePredicate（）；
window.addEventListener（“resize”，this.updatePredicate）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updatePredicate）；
}
updatePredicate（）{
this.setState（{showText:window.innerWidth>319}）；
}
render（）{
返回(

{AppName}

{this.state.isloged&&
{this.state.showText&&Wyloguj się}
}
);
}
}
函数映射状态（状态）{
const{session}=state.login；
返回{isLogged:！（会话类型=='undefined'）}
}
const connectedHeader=connect（mapState）（Header）；
导出{connectedHeader as Header}；

---

原因可能是什么

constructor

只执行一次，因此当您设置

isloged

时

this.state = {
   isLogged: this.props.isLogged,
   showText: true
};

isLogged

在收到下一个道具时不会更改

这里有两种方法

最简单的方法是，直接使用

this.props.isloged

为您提供如下条件：

---

抓得好，拉维巴格尔！：）

this.state = {
   isLogged: this.props.isLogged,
   showText: true
};

{this.props.isLogged &&
    <MDBNavbarNav right>
        <MDBNavItem>
            <MDBNavLink to="/logout">
                <MDBIcon icon="sign-out-alt"/>
                {this.state.showText && <span>Wyloguj się</span>}
            </MDBNavLink>
        </MDBNavItem>
    </MDBNavbarNav>
}

componentDidUpdate(nextProps){
  if(nextProps.isLogged !== this.props.isLogged){
     this.setState({isLogged: this.props.isLogged})
  }
}