React.js中如何获取最深层级的嵌套对象？

问题场景 #

我定义了each_devices变量，代码如下：

const each_devices = object_device_value.map((e) => ({ e }));

console.log(each_devices);
console.log(each_devices[0]);

控制台输出显示each_devices是包含嵌套对象的数组，但执行console.log(each_devices[0].e)后，输出的内容仍为嵌套结构，需要进一步提取才能拿到目标对象（即包含entity_id、object_id等字段的深层对象）。

解决方案 #

1. 修正数组映射逻辑（最直接）

如果object_device_value中的每一项本身就是你要的目标深层对象，那当前的map写法多套了一层{e}结构，直接修改为：

// 直接映射原数组项，无需额外包裹
const each_devices = object_device_value.map(e => e);
// 或者直接复制数组：const each_devices = [...object_device_value];

修改后，each_devices[0]就是目标对象，可直接访问字段，比如each_devices[0].entity_id。

2. 逐层访问嵌套结构（保留现有数组结构）

如果必须保留each_devices当前的结构（每一项为{e: 嵌套对象}），需要根据控制台展开的结构逐层向下访问。比如从each_devices[0].e的输出中找到目标对象所在的层级，示例如下（需根据实际结构调整键名）：

// 假设目标对象在each_devices[0].e.data下
const targetDevice = each_devices[0].e.data;

如果不确定嵌套路径，可使用console.dir(each_devices[0].e)展开完整结构，定位目标对象的位置。

3. 递归提取深层对象（适配未知嵌套深度）

如果嵌套深度不固定，可写一个递归函数自动查找包含目标字段的对象：

// 递归查找包含指定字段的深层对象
function findDeepObject(obj) {
  if (!obj) return null;
  // 判断当前对象是否为目标对象（以包含entity_id为例）
  if ('entity_id' in obj) {
    return obj;
  }
  // 遍历所有属性继续递归查找
  for (const key in obj) {
    const result = findDeepObject(obj[key]);
    if (result) return result;
  }
  return null;
}

// 使用示例
const targetDevice = findDeepObject(each_devices[0]);

内容的提问来源于stack exchange，提问作者user15346124