@Uzumaki

Почему не перерисовывается компонент (React+MobX)?

Не получается заставить счётчик (count) перерисовываться по нажатию на кнопку...
Раньше делал напрямую через обычную функцию изменяя состояние на + 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;
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
Что бы заработал inject Нужно выше прокинуть значение через Provider. Тут пример

<Provider basketStore={basketStore}>
  <EmptyOrNot />
  <Button onClick={basketStore.increase}>Test Button</Button>
</Provider>
Ответ написан
Ваш ответ на вопрос

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

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