Изменение хранилища не повторно отображает вычисленную функцию в компоненте

У меня проблема с тем, что 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 из «mobx / lib / mobx» (и должен быть просто «mobx»). Это вызывает открытие другого экземпляра mobx.


reactjs javascript mobx mobx-react
person Shlizer    schedule 27.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно изменить конструктор вашего магазина, чтобы использовать 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);
    });
  }
person Doron Brikman    schedule 28.07.2018
comment
Да, я допустил ошибку, но это не привело к возникновению этой проблемы. Спасибо за помощь. - person Shlizer; 31.07.2018