如何正确处理React嵌套数组/状态对象

Question

我有一个简单的例子：

具有某些特征的项目列表和包含特征列表的typeCharacteristics列表。

每次我都想改变特征以增加我必须做这样的事情：

for(let typeChar of typeCharacteristics){
   for(let char of typeChar.characteristics){
      for(let item of items){
        for(let charac of item.characteristics){
            if(charac.id === char.id){
         //increment
            }
         }
      }
   }
}

有时候这有点棘手，当我想调试时很混乱。我已经通过在函数中放入一些循环来保持代码尽可能整洁，从而进行了重构，但是嵌套时循环仍然很混乱。

有什么更清洁的方法可以正确地实现这一目标？