状态更新后Mobx没有渲染更新

Question

我是React + Mobx的新手，我只是尝试设置Google登录名。 我设置了对Mobx使用装饰器的反应。 因此，我有一家商店，用于存储个人资料的google名称。在导航栏中，如果商店的配置文件属性为null，则有一个“ connexion”按钮，如果不是，则有一个“ deconnexion”按钮。

当我成功连接到Google登录名后，我的按钮更改生效了。但是，当我想断开连接时，请将商店的配置文件属性设置为null时，我的按钮不会更改，但是profile属性为null。

商店由提供者注入到组件中。

个人资料存储

import { observable, action } from "mobx";


export default class ProfileStore {
    @observable profile = null;

    @action
    login(p) {
        this.profile = p;
    }

    @action
    logout(){
        this.profile=null;
    }   
}

导航栏组件

import React, { Component } from 'react';
import '../css/Navbar.css';
import Login from '../components/login.component';
import { Navbar, Nav, Form } from 'react-bootstrap';
/*import { NavLink } from "react-router-dom";*/
import {Link} from 'react-router-dom';
import { observer,inject } from 'mobx-react';
@inject("profileStore")
@observer
class Navigation extends Component{



    render(){
        //var profileGoogle = reactLocalStorage.getObject("profile_google");
        return (

                <div className="Navbar">

                <Navbar bg="dark" variant="dark">
                    <Navbar.Brand href="#home">SlipBook</Navbar.Brand>
                    <Nav className="mr-auto">
                        <a to={"/"} >Accueil</a>
                        <a to={"/messagerie"}>Messagerie</a>
                    </Nav>
                    <Form inline>

                        <Login/>
                    </Form>
                </Navbar>


                </div>
            );




    }
}

export default Navigation;

登录组件

import React from 'react';
import { Modal, Form, Button } from 'react-bootstrap';
import GLogin from './glogin.component.js';
import { inject, observer } from 'mobx-react';

const pStyle = {
    color : 'white'
  };

@inject("profileStore")
@observer
class Login extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.handleShow = this.handleShow.bind(this);
      this.handleClose = this.handleClose.bind(this);
      this.handleLogin = this.handleLogin.bind(this);
      this.isLogged = this.isLogged.bind(this);
      this.handleLogout = this.handleLogout.bind(this);
      this.handleEmailChange = this.handleEmailChange.bind(this);
      this.handlePasswordChange = this.handlePasswordChange.bind(this);

      this.state = {
        show: false,
        email:null,
        password:null
      };
    }

    handleClose() {
      this.setState({ show: false });
    }

    handleShow() {
      this.setState({ show: true });
    }

    handleEmailChange(e) {
        this.setState({email: e.target.value});
    }

    handlePasswordChange(e) {
        this.setState({password: e.target.value});
    }

    handleLogin(event) {
        event.preventDefault();
        this.props.profileStore.login(this.state.email);
        this.handleClose();

    }

    handleLogout(event){
      this.props.profileStore.logout();
  }


    isLogged(){
        if(this.props.profileStore.profile==null){
            return <Button variant="primary" onClick={this.handleShow}>
                    Connexion
                </Button>;
        }
        else{
            return <div style={pStyle}>Bienvenue {this.props.profileStore.profile}<Button variant="primary" onClick={this.handleLogout}>
            Deconnexion
    </Button></div>;
        }



    }

    render() {
      return (
        <>

          <this.isLogged />

          <Modal show={this.state.show} onHide={this.handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Connexion</Modal.Title>
            </Modal.Header>
            <Modal.Body>
            <Form onSubmit={this.handleLogin}>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Adresse email</Form.Label>
                    <Form.Control onChange={this.handleEmailChange} type="email" placeholder="DONNE TON MAIL LA" />

                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Mot de passe</Form.Label>
                    <Form.Control onChange={this.handlePasswordChange} type="password" placeholder="azy tkt on regarde pas" />
                </Form.Group>

                <Button variant="primary" type="submit">
                    Connexion
                </Button>
                <GLogin close={this.handleClose}/>
            </Form>
            </Modal.Body>

          </Modal>
        </>
      );
    }
  }
  export default Login;