如何更新这样的嵌套 state？

Question

How could I update, for example, the object with key: 1311 and return the updated state? Assuming I don't know its exact location...just its key value.

state = {
  iow: [
    {
      key: 1,
      iow_description: "EARTH WORK",
      unit: null,
      rate: null,
      children: [
        {
          key: 11,
          iow_description: "Sub-head",
          unit: null,
          rate: null
        },
        {
          key: 12,
          iow_description: "Sub-head",
          unit: null,
          rate: null,
          children: [
            {
              key: 121,
              iow_description: "Sub-head",
              unit: "cu.m",
              rate: 100.0
            }
          ]
        },
        {
          key: 13,
          iow_description: "Sub-head",
          unit: null,
          rate: null,
          children: [
            {
              key: 131,
              iow_description: "Sub-head",
              unit: null,
              rate: null,
              children: [
                {
                  key: 1311,
                  iow_description: "Sub-head",
                  unit: "each",
                  rate: 200.0
                },
                {
                  key: 1312,
                  iow_description: "Sub-head",
                  unit: "sq.m",
                  rate: 200.0
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

Answer 1

const updateObj = (a, key, newObj) => {
  for (var i in a) {
    const currentObj = a[i];
    if (currentObj.key == key) {
      // Merge old and new data to new object so that change is detected
      a[i] = { ...currentObj, ...newObj }
      return true; // Done
    }
    // Search recursively
    if (updateObj(currentObj.children, key, newObj)) {
      return true;  // Done
    }
  }
}


// Update 'rate' value to 150 on object where key == 1311
updateObj(state['iow'], 1311, { rate: 150 })

Answer 2

You need recursion

const updateState = (children, key, newData) => {
  return children.map(item => {   
     if(item.children) {
       item.children = updateState(item.children, key, newData);
     }

    return item.key === key ? Object.assign({}, item, newData) : item;
  });
};
state.iow = updateState(state.iow, 131, {iow_description: "new value", rate: 123})

Answer 3

you update it like this:

state.iow[0].children[2].children[0].children[0].key = 200000 //update
var getValue = state.iow[0].children[2].children[0].children[0].key; //get the value

Answer 4

 var state = { iow: [ { key: 1, iow_description: "EARTH WORK", unit: null, rate: null, children: [ { key: 11, iow_description: "Sub-head", unit: null, rate: null }, { key: 12, iow_description: "Sub-head", unit: null, rate: null, children: [ { key: 121, iow_description: "Sub-head", unit: "cu.m", rate: 100.0 } ] }, { key: 13, iow_description: "Sub-head", unit: null, rate: null, children: [ { key: 131, iow_description: "Sub-head", unit: null, rate: null, children: [ { key: 1311, iow_description: "Sub-head", unit: "each", rate: 200.0 }, { key: 1312, iow_description: "Sub-head", unit: "sq.m", rate: 200.0 } ] } ] } ] } ] }; // you can do this with different methods, u can even target another child doing //each inside each permuthing the key. $.each(state.iow[0].children[2].children[0].children[0],function(i,v){ $('div').append('<b>'+i+'</b> = '+v+'<br>') }); // simple target console.log(state.iow[0].children[2].children[0].children[0])

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> </div>