ReactJS Mobx 项目没有更新

Question

我正在尝试使用 MobX 构建一个扫雷游戏，我遇到的问题是，我不明白为什么我在板上的单元格不会更新。

这是一个包含我的代码的沙箱

https://codesandbox.io/s/epic-sun-n1dnz?file=/src/Components/CellComponent.js

在我的“CellComponent”中我定义了：

            <Button onClick={() => game.unveilCell(cell)}>{revealed? "2" : "?"}</Button>

所以我希望当我单击该单元格时，它会显示数字 2，但只有在我等待 1 分钟后它才会更新，我假设我错误地使用了 MobX 观察器

Answer 1

您需要使 makeAutoObservable 调用成为 Cell 构造函数中的最后一个调用：

export default class Cell {
  value;
  x;
  y;
  revealed;
  flag;

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.revealed = false;
    this.flag = false;
    this.value = 0;
    // It should be in the end, after all initialisations
    makeAutoObservable(this);
  }

  // ...

默认情况下，如果没有额外的配置，MobX 无法拾取未定义的字段并使它们可观察。

ReactJS Mobx 项目没有更新

ReactJS Mobx items are not updating

reactjs

mobx

mobx-react