MobX存储更新的“延迟”

问题描述

我有一个简单的选项卡菜单和一个概述：在概述中，我正在到达一家商店，一个MobX商店，并且正在获取当前所在的标签，然后以文本形式显示在看看我选择了哪个标签，问题是文本更新已“延迟”；

说当前选择的标签是“ A”，如果我单击“ B”，文本仍将显示“ A”，但是，如果我单击“ C”，它将显示“ B”（因此标签之前），它会一直持续下去；

我没有做太多尝试，查阅了MobX的大量教程，但都没有相关性，至少与我的情况无关。没有编译错误，一切都按原样导入/连接（我认为）。

这里有一个小方案：

对于代码部分，我将粘贴相关代码，这样您就不必阅读全部内容：

点击事件在这里发生：

<MenuItem title="Dashboard" icon="home" onClick={e => this.handleClick(e)} active={this.state.selected === "Dashboard"}/>

通过以下方式处理：

handleClick(event)
{
    let txt = event.target.innerText        

    if(txt === this.state.selected)
        return;

    this.setState({
        selected: txt
    })

    UserStore.tab = this.state.selected
}

因此菜单实际上可以获取并保持商店更新：

import { observer } from 'mobx-react' export default observer(Menu)

这是完整的UserStore.js类：

import { extendobservable } from 'mobx';

class UserStore {
    constructor() {
        extendobservable(this,{
            loading: true,isLoggedIn: false,username: "",tab: "",theme: "Dark"
        })
    }
}

export default new UserStore();

最后，显示选定的选项卡：

class Main extends React.Component {
    render() {
        return (
            Currently in tab: {UserStore.tab}               
        )
    }
}

import { observer } from 'mobx-react'    
export default observer(Main)

我确实知道这个问题看似微不足道（或不是？），但是距我开始只有两天了，我在这里。

谢谢。

解决方法

handleClick(event)
{
    let txt = event.target.innerText        

    if(txt === this.state.selected)
        return;

    this.setState({
        selected: txt
    })

    UserStore.tab = this.state.selected
}

这是错误的：UserStore.tab = this.state.selected

这没关系：UserStore.tab = txt