组件对嵌套的 mobx 存储没有反应

Question

我正在基于 MobX 中的嵌套存储 (SquareModel) 渲染一个正方形。单击正方形时，我希望在 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>
  );
});

Answer 1

toggleSelection 方法中的 "this" 出错

它应该看起来像：

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

或者你需要使用，比如这里的箭头函数：

toggleSelection = () => {

组件对嵌套的 mobx 存储没有反应

Components not reacting to nested mobx stores

mobx

mobx-react