javascript - 为什么 mobx 不是 @computed 值？

Question

很简单:当它引用的可观察对象发生变化时，计算值不会更新。

import {observable,computed,action} from 'mobx';

export default class anObject {

    // THESE WRITTEN CHARACTERISTICS ARE MANDATORY
    @observable attributes = {}; // {attribute : [values]}
    @observable attributeOrder = {}; // {attribute: order-index}
    @observable attributeToggle = {}; // {attribute : bool}


    @computed get orderedAttributeKeys() {
        const orderedAttributeKeys = [];

        Object.entries(this.attributeOrder).forEach(
            ([attrName, index]) => orderedAttributeKeys[index] = attrName
        );

        return orderedAttributeKeys;
    };

    changeAttribute = (existingAttr, newAttr) => {
        this.attributes[newAttr] = this.attributes[existingAttr].slice(0);
        delete this.attributes[existingAttr];

        this.attributeOrder[newAttr] = this.attributeOrder[existingAttr];
        delete this.attributeOrder[existingAttr];

        this.attributeToggle[newAttr] = this.attributeToggle[existingAttr];
        delete this.attributeToggle[existingAttr];

        console.log(this.orderedAttributeKeys)
    };

}

调用changeAttribute后，this.orderedAttributeKeys没有返回新值。该节点看起来没有变化。

但是，如果我删除 @computed 并将其设为普通(非 getter)函数，那么出于某种原因 this.orderedAttributeKeys 会显示新值。这是为什么？

编辑:添加了更多信息

它通过日志和调试工具判断更新，但不在屏幕上呈现(下面的组件有这段代码，但不重新呈现)。为什么？

{/* ATTRIBUTES */}
<div>
    <h5>Attributes</h5>
    {
    this.props.appStore.repo.canvas.pointerToObjectAboveInCanvas.orderedAttributeKeys.map((attr) => { return <Attribute node={node} attribute={attr} key={attr}/>})
    }
</div>

pointerToObjectAboveInCanvas 是一个变量。它已被设置为指向上面的对象。

anObject 中的 changeAttribute 函数在此模式中被调用。它在 Attribute 组件中用这个方法开始

    handleAttrKeyChange = async (existingKey, newKey) => {
        await this.canvas.updateNodeAttrKey(this.props.node, existingKey, newKey);
        this.setState({attributeEdit: false}); // The Attribute component re-renders (we change from an Input holding the attribute prop, to a div. But the above component which calls Attribute doesn't re-render, so the attribute prop is the same
    };

在另一个对象(this.canvas)中调用这个方法

    updateNodeAttrKey = (node, existingKey, newKey) => {
        if (existingKey === newKey) { return { success: true } }
        else if (newKey === "") { return { success: false, errors: [{msg: "If you'd like to delete this attribute, click on the red cross to the right!"}] } }

        node.changeAttribute(existingKey, newKey);

        return { success: true }
    };

为什么持有 Attribute 的组件没有重新渲染？它调用 orderedAttributeKeys!!!还是我问错了问题，还有其他问题...

一个有趣的事实是，同一组调用发生在更改 attributeValue(属性是对象的可观察字典中的键，attributeValue 是值)，但它显示了(因为属性组件重新呈现并直接从节点的属性字典以提取值。同样，这就是问题所在，属性键更改但它外部的组件不会重新呈现，所以属性 Prop 不会更改？!!!

Answer 1

这是因为你用@action装饰器装饰了changeAttribute。

这意味着该函数内的所有可观察到的突变都发生在单个事务中——例如在控制台日志之后。

如果您删除 @action 装饰器，您应该会看到这些可观察对象在调用它们的行上得到更新，并且您的控制台日志应该如您所愿。

进一步阅读: https://mobx.js.org/refguide/action.html https://mobx.js.org/refguide/transaction.html