React.js中如何解构嵌套JSON数据，通过Object.keys获取对应属性值

问题解决方法 #

你现在只能获取到键名的原因是Object.keys()返回的是对象所有可枚举属性的键名数组，需要用拿到的键名去对应对象中读取属性值即可。

方法1：在原有代码基础上修改 #

你只需要在遍历子键的时候，通过col[item][subitem]就能读取到对应的属性值，修改后的代码如下：

Object.keys(col).map((timeKey, index) => {
  return (
    <div key={index}>
      {/* 渲染时间维度键名，即数据中的时间字符串 */}
      <h3>{timeKey}</h3>
      {Object.keys(col[timeKey]).map((metricKey, i) => {
        return (
          <div key={i}>
            {/* 同时渲染指标名和对应的指标值 */}
            <span>{metricKey}: </span>
            <span>{col[timeKey][metricKey]}</span>
          </div>
        );
      })}
    </div>
  );
})

方法2：使用Object.entries()简化遍历（更推荐） #

Object.entries()会直接返回[键名, 键值]格式的二维数组，不需要再单独用键去取值，写法更直观：

// 若你的col变量直接为"Time Series (5min)"对应的对象值，可直接运行如下代码
Object.entries(col).map(([timeKey, timeValue], index) => {
  return (
    <div key={index}>
      <h3>{timeKey}</h3>
      {Object.entries(timeValue).map(([metricKey, metricValue], i) => (
        <div key={i}>
          {metricKey}: {metricValue}
        </div>
      ))}
    </div>
  );
})

注意事项 #

• 如果你的col是包含"Time Series (5min)"的最外层完整对象，需要先取col["Time Series (5min)"]再执行遍历操作。
• 列表的渲染key建议尽量用timeKey、metricKey这类全局唯一的值代替索引，避免React重渲染出现异常。

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