Компоненты, не реагирующие на вложенные хранилища mobx

#mobx #mobx-react

#mobx #mobx-реагировать

Вопрос:

Я визуализирую квадрат на основе вложенного хранилища ( SquareModel ) в MobX. При нажатии на квадрат я бы хотел, чтобы внутри срабатывало действие SquareModel , изменяющее selected свойство, которое, в свою очередь, изменит размер квадрата. Однако, похоже, я не могу заставить квадрат реагировать на изменение свойства. Есть идеи о том, как заставить это работать?

Изолированная среда: https://codesandbox.io/s/m51oyzz069

Основное хранилище:

 import { observable, decorate } from "mobx";
import SquareModel from "./SquareModel";

class MobXStore {
  square = new SquareModel();
}

decorate(MobXStore, {
  square: observable
});

export default new MobXStore();

Вложенный магазин:

 import { observable, action, decorate } from "mobx";

class SquareModel {
  selected = false;
  toggleSelection() {
    console.log("toggle selection");
    this.selected = !this.selected;
  }
}

decorate(SquareModel, {
  selected: observable,
  toggleSelection: action
});

export default SquareModel;

Реагировать:

 const App = observer(() => {
  return (
    <svg className="App">
      <svg x={100} y={100}>
        <Square
          unit={MobXStore.square.selected ? 2 : 1}
          onPointerUp={MobXStore.square.toggleSelection}
        />
      </svg>
    </svg>
  );
});

export const Square = observer(({ unit, ...props }) => {
  console.log("render square");
  return (
    <g {...props}>
      <rect height={unit * 50} width={unit * 50} style={{ fill: "blue" }} />
    </g>
  );
});

1. Что вы предоставляете MobXStore ? Импортировать его экземпляр не работает, вы должны использовать <Provider> from mobx-react . github.com/mobxjs/mobx-react#provider-and-inject

2. Я не думаю, что поставщик необходим в этом сценарии — в любом случае это не имеет никакого значения codesandbox.io/s/73lmp636rj

3. Я использую более новую версию mobx, чтобы я мог использовать перехваты — синтаксис похож на github.com/mobxjs/mobx-react-lite#why-no-providerinject

Ответ №1:

В методе выбора переключений возникает ошибка с «this»

Это должно выглядеть так:

 onPointerUp = {() => MobXStore.square.toggleSelection()}

или вам нужно использовать, например, функцию arrow здесь:

 toggleSelection = () => {