Question

将节点添加到列表中，但组件未重新呈现。 Mobx Chrome Extension开发人员工具说这是一个依赖项，但由于某些原因仍然没有反应！

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

按钮：

@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有关，也许标记@observable不够好，但还不太确定。将repo和canvas标记为可观察对象，并实例化一个新的Repo（）对象和新的Canvas（）对象，就像在getNodes中创建new Node（）一样。

Answer 1

看起来像爱德华解决了它，类似于Redux，看起来您必须使用字典创建一个新对象而不是对其进行修改。我猜这是因为键currNode.id已经定义（值未定义），而我们只是将其修改为currNode。这是我的猜测，无论现在是否有效。

Answer 2

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

@observable nodeIdToNodeData = {};

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

或者尝试升级到mobx v5。

更多信息here

嵌套的可观察更改时，组件未重新渲染

2 个答案: