存储更改不会重新渲染组件中的计算函数

Question

我在 React/MobX 从组件中看到存储更改时遇到问题。这是我得到的：

• 商店： 管理商店的类（我的表列的可见性），得到了@observable Map。

每当我单击列表中的任何按钮元素时，它都会更改状态（正在更改存储），但按钮组件不会重新渲染，因此我将其值视为旧组件。手动重新渲染后（更改两次显示按钮的状态）列表正确渲染，直到我再次点击。

这是造成问题的代码：

商店：

export default class ColumnStore {
    constructor(columns) {
        this.showed = extendObservable(new Map());
        columns.map(column => {
            this.showed.set(column.id, column.show);
        });
    }

    @action changeShow(showId, showValue) {
        if (this.showed.has(showId)) {
            this.showed.set(showId, showValue);
        }
    }
}

---

已解决

我想通了。不幸的是这不是我提供的代码中的问题 =/

问题是我的 PHPStorm 自动为来自“mobx/lib/mobx”的 mobx 元素添加了导入（应该只是“mobx”）。这会导致打开另一个 mobx 实例。

Answer 1

您需要将商店的构造函数更改为使用observable 而不是extendObservable 来创建showed：

class ColumnStore {
  constructor(columns) {
    this.showed = observable(new Map());
    columns.map(column => {
      this.showed.set(column.id, column.show);
    });
  }

更简洁的方法是使用observable 作为装饰器：

class ColumnStore {
  @observable showed = new Map();

  constructor(columns) {
    columns.map(column => {
      this.showed.set(column.id, column.show);
    });
  }