MobX 商店更新“延迟”

Question

我有一个简单的选项卡菜单和一个概览：在概览中，我正在寻找一家商店，一家 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)

我确实知道这个问题可能看起来微不足道（或不重要？），但我才刚开始两天，所以我来了。

谢谢。

Answer 1

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