Блог

У меня есть простое меню вкладок и обзор: в обзоре я выбираю магазин, магазин 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