MobX отображает результаты предыдущего запроса, когда этот запрос ошибки - PullRequest
Новая
       10

MobX отображает результаты предыдущего запроса, когда этот запрос ошибки

0 голосов
/ 08 ноября 2019

Когда возникает ошибка тайм-аута при получении данных из API для рендеринга на странице React с поддержкой MobX, я вижу результаты последнего успешного запроса, отображаемого вместо нужных данных (или пустых данных). В частности, следующие шаги:

  1. Введите страницу, для которой требуется идентификатор элемента для получения результатов из базы данных и поместит результаты запроса в состояние для отображения.
  2. Вернитесь, введите ту же страницус новым идентификатором этот запрос истекает. Вместо того, чтобы видеть ничего или ошибку, я вижу результаты шага 1, то есть неправильные данные элемента.

Это происходит по всему сайту, и мне нужно исправить, которое я могу внедрить везде. Ниже приведен код, который я написал для решения проблемы на одной странице, но этот шаблон необходимо будет скопировать в каждый магазин нашего приложения. Я не уверен, что это правильное решение, потому что оно работает, отслеживая идентификатор элемента и удаляя все наблюдаемые при изменении - это похоже на то, что MobX должен делать, поэтому я боюсь, что мое решение - это анти-шаблон.

Есть ли лучшее решение этой проблемы, чем представленное ниже? 

class SupplierUtilizationStore {
    @observable key = 0; //supplierId
    utilizationSearchStore = new SearchStateStore();
    @observable utilizationSearchResults = [];
    @observable selectedChartType = 'ByMonth';
    @observable supplierUsageForChart = {};
    @observable utilizationSummaryData = {};

    constructor(rootStore, dataLayer) {
        this.rootStore = rootStore;
        rootStore.supplierStore = this;
        this.db = dataLayer;

        this.initUtilizationSearchStore();
    }

    initUtilizationSearchStore() {
        this.utilizationSearchStore.searchResultsTotalUnitCost = observable({});
        this.utilizationSearchStore.searchResultsTotalCost = observable({});
        this.utilizationSearchStore.searchResultsTotalQty = observable({});
        this.utilizationSearchStore.supplierId = observable({});
    }

    //Call this in componentDidMount()
    @action
    initStore(key) {
        if (key !== this.key) {
            this.utilizationSearchStore = new SearchStateStore();
            this.initUtilizationSearchStore();
            this.utilizationSearchResults = [];
            this.selectedChartType = 'ByMonth';
            this.supplierUsageForChart = {};
            this.utilizationSummaryData = {};
            this.utilizationSearchStore.supplierId = key;
            this.key = key;
        }
    }

...
}
...