Как я могу обновить такое вложенное состояние?

Question

Как я могу обновить, например, объект с key: 1311 и вернуть обновленное состояние? Предполагая, что я не знаю его точное местоположение ... только его ключевое значение.

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

Вам нужна рекурсия

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

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>

Answer 4

вы обновляете это так:

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