1

Всем доброго времени суток, такая проблема возникла, не могу понять почему не происходит перерисовка компонента. До этого была обычная функция, которая сробатывала по нажатию и меняла значение состояния счётчика на + 1. Сейчас по необходимости использую MobX. Счетчик работает, но только после ручного перезахода на страницу с ним (тобишь вручную вызываю отрисовку). Не могу как раньше сделать, чтобы счётчик отрисовывался сам по нажатию.

basket.tsx

import { observer, inject } from "mobx-react";
import basketStore from "../stores/basketStore";

const EmptyOrNot = inject("basketStore")(
observer((props) => {
const { basketStore } = props;
return (
  <>
    <ShoppingCartIcon color="disabled" style={{ fontSize: 150 }} />
    <Typography style={{ fontSize: 23 }}>
      <Typography>{basketStore.count}</Typography>
    </Typography>
  </>
  );
 })
);

const BasketPage = inject("basketStore")(
observer((props) => {
const { basketStore } = props;

return (
  <>
    <Container className="EmptyBasket">
      <Container>
        <EmptyOrNot />
        <Button onClick={basketStore.increase}>Test Button</Button>
      </Container>
    </Container>
  </>
  );
 })
);

export default BasketPage;

basketStore.ts

import { observable, action } from "mobx";

class Basket {
@observable count = 0;

@action increase = () => {
this.count = this.count + 1;
 };
}

const BasketStore = new Basket();
export default BasketStore;

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.