mobx：如何创建中间可观察类

Question

我想创建一个中间类，以基于键值（A，B和C）计算和汇总来自商店的数据

---

第1步：创建商店

class store {
    mapping = {
        A: 1,
        B: 3,
        C: 10
    };
}

decorate(store, {
    mapping: observable
});

---

步骤2：

mapDetail应该为：

（1）接受输入mapKey。例如，mapKey = A

（2）访问存储并获取mapKey的相应值。在这种情况下，1。

（3）计算一些值。例如map2和map6。

class mapDetail { // I know this is wrong
    constructor(mapKey) {
        this.mapKey = mapKey;
    }
    get map2() {
        return this.props.store.mapping[this.mapKey] * 2;
    }
    get map6() {
        return this.props.store.mapping[this.mapKey] * 6;
    }

}

decorate(mapDetail, {
    map2: computed,
    map6: computed
});

---

步骤3：

react组件传递mapKeys来创建新的mapDetails并返回数据。当商店中的映射对象更改时，此组件应自动更新值。

class mapFinal extends React.Component {
    aDetail = new mapDetail("A")
    bDetail = new mapDetail("b")
    render() {
        return (<div> {this.aDetail.map6} {this.bDetail.map2}</div>);
    }
}

---

上面的代码无法正常工作。有人可以帮忙吗？

谢谢！