Почему не происходит повторный рендер компонента после изменения состояния mobx?

Есть Aside, который должен показываться/скрываться при нажатии а свитчер

import { observer } from 'mobx-react'
import asideStore from './aside.store'

const Aside = observer(props => {
    const switcherClick = () => {
        asideStore.toggleAside()
    }

    return (
        <Wrapper {...props}>
            <Switcher onClick={switcherClick} />
            {asideStore.show ? 'show' : 'hide'}
        </Wrapper>
    )
})


И есть простейший стор для Aside
import { observable } from 'mobx'

class AsideStore {
    @observable show

    constructor() {
        this.show = true
    }

    toggleAside() {
        this.show = !this.show
    }
}

export default new AsideStore()


Проблема в том, что this.show изменяется, но не перерендеривается в компоненте.

С чем это может быть связано?
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Bazyn
Вроде так должно сработать.
@action.bound
 toggleAside() {
        this.show = !this.show
    }

https://mobx.js.org/actions.html
Ответ написан
Похоже что у вас MobX версии 6, а для него в конструкторе требуется навесить makeObservable(this) или makeAutoObservable(this) подробнее тут

Так что у вас 2 варианта:
1) Даунгрейдить MobX на 5 версию
2) Использовать в конструкторе makeAutoObservable(this)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы