Immutable.js结构(更新嵌套地图)? [英] Immutable.js structure (updating nested map)?

问题描述

我有一个带有地图和列表的深层嵌套的不可变结构.我不确定更新结构(ID为356的节点)中的嵌套地图的最佳方法.

I have a deeply nested immutable structure with maps and lists. I'm not sure about the best way to update a nested map within the structure (the node with id:356).

我创建了一个搜索列表的函数，找到了目标地图，并对其进行了更新.但是结构保持完整！！知道我在做什么错吗?

I create a function to search the list, I find the target map, I update it. But the structure stays intact!! any idea what I'm doing wrong?

https://jsbin.com/sadoni/1/edit?js,console

    var structure = Immutable.fromJS(
        {
            someKey:{id:1},
            links:[
                {id:123, c:false, chd:[]},
                {id:134, c:false, chd:[
                    {id:212, c:false, chd:[
                        {id:245, c:false, chd:[]},
                        {id:256, c:false, chd:[]}
                    ]},
                    {id:145, c:false, chd:[]},
                    {id:156, c:false, chd:[]},
                    {id:213, c:false, chd:[
                        {id:313, c:false, chd:[]},
                        {id:314, c:false, chd:[
                            {id:345, c:false, chd:[]},
                            {id:356, c:false, chd:[]}
                        ]}
                    ]}
                ]}

            ]
        }
    );


    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - _findNode
    function _findNode(nodes, func, cb){
        let found = false;
            var findInTree = (nodes, func) => {
                if(nodes && nodes.size > 0){
                    nodes.forEach(node => {
                        if(found === false){
                            if (func(node) === true) {
                                found = true;
                                cb(node, nodes);
                            } else {
                                let chd = node.get('chd');
                                if(chd && chd.size > 0 && found === false){
                                    findInTree(chd, func);
                                }
                            }
                        }
                    });
                }
            };
            findInTree(nodes, func, cb);
    }


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - _filter function
function filter(link){ return link.get('id')===356; }

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - _find the links array inside the tree
var links = structure.get('links');

function changeTheNode(node, nodes){
    console.log(nodes.get(1).toJS()); // log nodes array before the update
   var index = nodes.findIndex(function(n){ return n === node; });
    nodes = nodes.update(index, function(itm){ return itm.set('c', true); });
    // nodes array changed
    console.log(nodes.get(1).toJS());

    // structure tree is still the same :(
    //console.log(structure.toJS());
}

_findNode(links, filter, changeTheNode);

推荐答案

递归！

var data = Immutable.fromJS({
    id:134, c:false, chd:[
        {id:212, c:false, chd:[
            {id:245, c:false, chd:[]},
            {id:256, c:false, chd:[]}
        ]},
        {id:145, c:false, chd:[]},
        {id:156, c:false, chd:[]},
        {id:213, c:false, chd:[
            {id:313, c:false, chd:[]},
            {id:314, c:false, chd:[
                {id:345, c:false, chd:[]},
                {id:356, c:false, chd:[]}
            ]}
        ]}
    ]
});

function search(val, target, changeTheNode) {
    if (val.get('id') === target) {
        return changeTheNode(val);
    }

    return val.set('chd',
      val.get('chd')
         .map((v) => search(v, target, changeTheNode))
    );
}

var updatedData = search(data, 356, (node) => node.set('c', true))

结果是

{
  "id": 134,
  "c": false,
  "chd": [
    {
      "id": 212,
      "c": false,
      "chd": [
        {
          "id": 245,
          "c": false,
          "chd": []
        },
        {
          "id": 256,
          "c": false,
          "chd": []
        }
      ]
    },
    {
      "id": 145,
      "c": false,
      "chd": []
    },
    {
      "id": 156,
      "c": false,
      "chd": []
    },
    {
      "id": 213,
      "c": false,
      "chd": [
        {
          "id": 313,
          "c": false,
          "chd": []
        },
        {
          "id": 314,
          "c": false,
          "chd": [
            {
              "id": 345,
              "c": false,
              "chd": []
            },
            {
              "id": 356,
              "c": true,
              "chd": []
            }
          ]
        }
      ]
    }
  ]
}

这篇关于Immutable.js结构(更新嵌套地图)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！