React中渲染带随机键名的复杂JSON/JS对象实现表格展示

在React开发过程中，开发者需要将从数据库返回的复杂结构JSON/JavaScript对象渲染为数据表格，但遇到了返回数据的结构特性：所有业务数据节点的一级键均为随机生成的字符串标识，典型示例为形如-MXD0MSwDX8FN6qUw9H0的随机字符串，开发者无法提前预知这些键的具体取值。

将每个随机键对应节点内部固定存在的one、two、three、four字段，逐一提取为表格的行数据条目，最终传入DataTable组件完成渲染。

• 最初尝试用数组方法直接转换原始返回数据，先后使用[].concat(tabledData)、Array.of(tabledData)等操作做结构转换，最终得到的结果无法适配DataTable的入参要求，未达到预期效果
• 直接数组转换的方案不可行后，开发者转向基于JavaScript对象遍历逻辑提取目标数据，目前在实现遍历逻辑的过程中遇到阻碍

• 遍历存储业务数据的状态值Data时，通过Object.keys()获取到的全部一级键都是随机生成的字符串，不存在固定的可枚举键名
• 需要用到的业务字段one/two/three/four全部嵌套在每个随机键对应的对象内部，因为无法提前知道随机键的具体值，没法通过常规的固定路径访问方式读取到嵌套子节点的字段值，导致现有渲染逻辑无法正常运行

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