存儲更改不會重新呈現組件中的計算函數

Question

我在React / MobX遇到問題時看到了組件中商店的變化。 這是我得到的：

• Store：用於管理商店的類（表中列的可見性），獲取了@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);
    });
  }