已解决

Question

React / MobX遇到问题，发现组件中的存储发生了变化。这就是我所拥有的：

商店： 用于管理商店的类（表中列的可见性），获取了@observable Map。

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

这是造成问题的代码：

商店：

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);
    });
  }

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

已解决

1 个答案: