React JS中用于对象遍历的map函数等价实现方案是什么？

我是React开发新手，在处理API调用并将返回的JSON数据渲染至HTML表格时遇到问题：当返回的JSON为包裹在方括号[]内的数组结构时，我可通过map函数为表格单元格分配键值正常渲染；但遇到仅包裹在花括号{}内的纯对象结构JSON时，map函数无法生效，页面加载后表格无数据展示，仅能在网络请求面板确认API调用成功。

结构示例 #

数组结构JSON示例 #

[
    {
        "id_1": 0,
        "id_2": 1,
        "id_3": 30,
        "id_4": 9,
        "id_5": 0,
        "id_6": "Marty",
        "id_7": "111-111-1111",
        "location": "Algiers",
        "id_0": 0
    }
]

纯对象结构JSON示例 #

{
    "id_1": 1,
    "whatever_id": 1,
    "whatever_name": "Blah",
    "id_0": 0
}

原有表格渲染代码示例 #

<table className='in-line'>
    <thead>
        {(items.length > 0) ? items.map((item, index) => {
            return (
                <Fragment key={index}>
                    <tr><th>Blah blah 1</th><td>{item.id_1}</td></tr>
                    <tr><th>Blah blah 2</th><td>{item.id_2.nameless_id}</td></tr>
                    <tr><th>Name</th><td>{item.id_2.name}</td></tr>
                    <tr><th>Blah blah 3</th><td>{item.id_2.wired_id}</td></tr>
                    <tr><th>Update</th><td>{item.update}</td></tr>
                    <tr><th>Record</th><td>{item.record}</td></tr>
                </Fragment>
            );
        }) : <tr><td colSpan='5'>Data Loading...</td></tr>}
    </thead>
    <tbody>
    </tbody>
</table>

上述代码中<th>和<td>内容为示例，仅用于说明表格结构，当前可渲染数组结构JSON，无法渲染纯对象结构JSON。

更新1：附现有代码 #

我未能自行解决该问题，现将现有代码附上（出于安全考虑隐去部分敏感信息）。

App.js #

import React, { useState } from "react";
import Table from "./components/BasicTable";

const App = () => {
    
    const [droplets, setDroplets] = useState([]);
    const handleClick = () => { 
        const api = "https://1...8"
        const token = 'e...w'

        fetch(api, {
            headers: {
                'Content-Type': 'application/json', 
                'Authorization': 'Bearer ' + token}})
        .then((response) => response.json())
        .then((response) => JSON.parse(setDroplets(response)))
    }
    return (
        <div className="App">
            <Table droplets={droplets} handleClick={handleClick}/>
        </div>
    );
};
export default App;

Table.js #

import React, { Fragment } from "react";
import "./table.css";

const Table = ({ droplets, handleClick }) => {

  return (
    <div className='parent'>
      <table className='in-line'>
        <thead>
          {(droplets.length > 0) ?
            (Object.values(droplets).map((droplet, index) => {
              return (
                <Fragment key={index}>
                  <tr><th>Lamp Fault</th><td>{droplet.lampFault}</td></tr>
                  <tr><th>Autonomy</th><td>{droplet.autonomy}</td></tr>
                  {/* 省略其余表格行 */}
                  <tr><th>Fully Charged</th><td>{droplet.fullyCharged}</td></tr>
                </Fragment>
              );
            })) : <tr><td colSpan='5'>Loading...</td></tr>}
          </thead>
          <tbody>
          </tbody>
        </table>
      <div className='button-container'>
        <button className='button-style' onClick={handleClick}>LOAD DATA</button>
      </div>
    </div>
  )
}
export default Table;

问题 #

烦请指点fetch函数或表格渲染代码需要如何修改才能适配纯对象结构的JSON数据，万分感谢。

更新2：最终解决方案 #

最终排查发现返回的JSON本身已是对象，无需额外解析。我为JSON结构创建了两个模型对象后，表格部分就不需要使用.map函数了，相关模型和更新后的Table.js代码如下：

LumStatus.js #

import WirelessLum from './WirelessLum'

function LumStatus() {
    this.pkid = 0,
    this.wirelessLumid = 0,
    this.lastStatRecStamp = "",
    // 省略其余属性
    this.wVersion = "",
    this.tmpLampTestMade = 0,
    WirelessLum
}
export default LumStatus

WirelessLum.js #

function WirelessLum() {
    this.pkid = 0,
    this.otherid = 0,
    this.simpSignid = 0,
    // 省略其余属性
    this.lumModel = null,
    this.lumStat = []
}
export default WirelessLum

更新后的Table.js #

const BasicTable = ({ droplets, handleClick, LumStatus, WirelessLum }) => {

    return (
        <div className='parent'>
            <table className='in-line'>
                <thead>
                    <Fragment>
                        <tr><th>Wireless Luminaire ID</th><td>{droplets.wirelessLumid}</td></tr>
                        <tr><th>PKID</th><td>{droplets.wirelessLum && droplets.wirelessLum.pkid}</td></tr>
                        <tr><th>Lamp Name</th><td>{droplets.wirelessLum && droplets.wirelessLum.name}</td></tr>
                        <tr><th>Registered</th><td>{droplets.wirelessLum && droplets.wirelessLum.registered}</td></tr>
                        {/* 省略其余表格行 */}
                        <tr><th>Lamp Fault</th><td>{droplets.lampFault}</td></tr>
                        <tr><th>Lamp Current</th><td>{droplets.lampCurrent}</td></tr>
                    </Fragment>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div className='button-container'>
                <button className='button-style' onClick={handleClick}>LOAD DATA</button>
            </div>
        </div>
    )
}
export default BasicTable;

创建模型后无需再将对象转为数组，也不需要使用.map函数，仅通过点语法就可以渲染出填充完成的表格，逻辑更简洁易用。
针对JSON中的嵌套对象，由于API调用是异步的，嵌套对象会在完整JSON信息加载完成前被渲染，因此会出现undefined报错，通过{droplets.wirelessLum && droplets.wirelessLum.pkid}这种条件渲染的写法即可解决该问题。

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