嵌套可观察更改时组件不会重新渲染

Question

将节点添加到列表中，但组件未重新渲染。Mobx Chrome 扩展开发工具说这是一个依赖项，但由于某种原因仍然没有反应！

按钮根据节点是否在列表中呈现“添加”或“删除”。除非我移动到另一个组件然后再次打开该组件，否则它不会重新渲染。

纽扣：

@inject("appStore") @observer
class EntityTab extends Component {
...
    render() {
         return (
            ...
            {/* BUTTONS */}
            { this.props.appStore.repo.canvas.graph.structure.dictionary[id] !== undefined ?
                <div onClick={() => this.props.appStore.repo.canvas.graph.function(id)}>
                     <p>Remove</p>
                </div>
                :
                <div onClick={() => this.props.appStore.currRepo.canvas.otherfunction(id)}>
                    <p>Add</p>
                </div>
            }
            ...
          )
    }
}

添加按钮呈现，我单击触发的按钮

this.props.appStore.currRepo.canvas.otherfunction(id)

然后我们转到这个函数

@observable graph = new Graph();
...
@action
    otherfunction = (idList) => {
        // Do nothing if no ids are given
        if (idList === null || (Array.isArray(idList) && idList.length === 0)) return;

        // If idList is a single value, wrap it with a list
        if (!Array.isArray(idList)) { idList = [idList] }

        let nodesToAdd = [];
        let linksToAdd = [];

        // Add all new links/nodes to graph
        Promise.all(idList.map((id) => { return this.getNode(id, 1) }))
            .then((responses) => {
                for (let i = 0; i < responses.length; i++) {
                    let res = responses[i];
                    if (res.success) {
                        nodesToAdd.push(...res.data.nodes);
                        linksToAdd.push(...res.data.links);
                    }
                }
                this.graph.addData(nodesToAdd, linksToAdd, idList, this.sidebarVisible);
            });
    };

getNode 函数从数据创建新的 Node 对象。作为参考，这些对象是这样实例化的

export default class Node {

    id = '';
    name = '';
    type = '';

    constructor(r) {
        for (let property in r) {
            // Set Attributes
            this[property] = r[property];
        }
    }
}

无论如何， addToGraphFromIds 会触发

this.graph.addData(nodesToAdd, linksToAdd);

然后我们去那个函数

@action
    addData = (nodes, links) => {
        this.structure.addNodes(nodes);
        this.structure.addLinks(links);
    };

哪个触发

this.structure.addNodes(nodes);

这导致了这个功能

    @observable map = new Map(); 
    @observable map2 = new Map(); 
    @observable dictionary = {}; 
    @observable dictionary2 = {}; 
    @observable allNodes = []; 
    @observable allLinks = []; 

    ...

    @action
    addNodes = (nodes=[]) => {
        if (!nodes || nodes.length === 0) return;
        nodes = utils.toArray(nodes);

        // Only consider each new node if it's not in the graph or a duplicate within the input list
        nodes = _.uniqBy(nodes, (obj) => { return obj.id; });
        const nodesToConsider = _.differenceBy(nodes, this.allNodes, (obj) => { return obj.id; });

        // Add nodes to map
        let currNode;
        for (let i = 0; i < nodesToConsider.length; i++) {
            currNode = nodesToConsider[i];
            this.map.set(currNode.id, new Map());
            this.map2.set(currNode.id, new Map());
            this.dictionary[currNode.id] = currNode;
        }

        // Update internal list of nodes
        this.allNodes = this.allNodes.concat(nodesToConsider);
    };

正如我们在第一个代码框中看到的，

this.props.appStore.repo.canvas.graph.structure.dictionary[id] !== undefined

当我们添加当前节点时，应该会导致按钮更改值。当我登录或使用 mobx chrome 扩展开发工具时，节点会出现在字典中，但我必须切换选项卡，然后按钮将重新渲染。我尝试过使用其他线路，例如

this.props.appStore.repo.canvas.graph.structure.allNodes.includes(node)

但这也行不通。我完全陷入困境，需要帮助。我有一种感觉，它与嵌套的可观察量有关，也许标记 @observable 还不够好，但不太确定。repo 和 canvas 被标记为 observables 并实例化一个新的 Repo() 对象和新的 Canvas() 对象，就像在 getNodes 中创建 new Node() 一样。

Answer 1

Mobx (v4) 不会跟踪可观察对象中条目的添加或删除，除非observable.map使用 。或者升级到mobx v5应该可以解决问题。对于您的具体问题，您可以尝试：

@observable nodeIdToNodeData = {};

//...
  this.nodeIdToNodeData = {...this.nodeIdToNodeData, [currNode.id]: currNode};

或者尝试升级到mobx v5.

更多信息请点击此处