如何更新这样的嵌套状态？答案

【问题标题】：How can I update such a nested state?如何更新这样的嵌套状态？
【发布时间】：2020-02-19 02:29:42
【问题描述】：

例如，我如何更新带有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
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

【问题讨论】：

标签： javascript reactjs multidimensional-array

【解决方案1】：

你像这样更新它：

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

【讨论】：

...我的意思是动态...假设我不知道它的确切位置。
这可能有帮助吗？您需要递归循环对象stackoverflow.com/questions/22222599/…

【解决方案2】：

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 })

【讨论】：

@NikitaU。我觉得“钥匙”意味着它是独一无二的。但你是对的。

【解决方案3】：

你需要递归

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})

【讨论】：

完美！谢谢@nikita-u
是的地图也可以正常工作:) 但如果你不知道在哪里插入最好的方法是找到 .如果您谈论通过点击选择的内容，您就可以定位

【解决方案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>

【讨论】：