当此查询出错时 MobX 显示先前查询的结果

Question

当从 API 检索数据以在启用 MobX 的 React 页面上呈现时发生超时错误时，我看到上次成功查询的结果显示在所需数据的位置（或空的数据）。具体步骤为：

输入需要项目 ID 以从数据库检索结果并将查询结果置于显示状态的页面
返回，用新的Id进入同一页面，本次请求超时。我没有看到任何内容或错误，而是看到了第 1 步的结果，即错误的项目数据。

这是在整个站点范围内发生的，我需要一个可以在任何地方实施的修复程序。下面是我编写的一些代码来解决一页上的问题，但需要将此模式复制到我们应用程序的每个商店中。我不确定这是正确的解决方案，因为它通过跟踪项目 ID 并在发生变化时清空所有可观察对象来工作 - 这感觉就像是 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;
        }
    }

...
}

Answer 1

据我了解"key"是id，哪个值取决于用户操作。因此，您可以在打开页面时更改它并观察更改以重置所有值。
我觉得 reset/init 另一个对象的每个值似乎都不正确。而是在确切的对象中创建一个方法来执行此操作（SearchStateStore 应该有自己的 init 方法）。
我没有更改那部分，但我不确定将根存储传递给子存储并将子存储分配给自身内部的父存储是否也是正确的架构行为（这不是题主的问题，自己能想到的就好）

所有代码如下所示：

class SupplierUtilizationStore {
    @observable key = 0; //supplierId
    utilizationSearchStore;
    @observable utilizationSearchResults;
    @observable selectedChartType = 'ByMonth';
    @observable supplierUsageForChart;
    @observable utilizationSummaryData;

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

        this.initStore();

        observe(this.key,()=>{ this.initStore() });
    }

    @action
    initStore() {
            this.utilizationSearchStore = new SearchStateStore();
            this.utilizationSearchStore.init(); // all logic for initialization should be in the concrete store
            this.utilizationSearchResults = [];
            this.selectedChartType = 'ByMonth';
            this.supplierUsageForChart = {};
            this.utilizationSummaryData = {};
            this.utilizationSearchStore.supplierId = this.key; 
        }
    }
 ...
}

这样，您就不必与商店互动并告诉它何时 init/reset。只需更改反应组件中的可观察 "key" 值，商店就会知道该怎么做。

当此查询出错时 MobX 显示先前查询的结果

MobX displaying previous query's results when this query errors

state

reactjs

mobx