React嵌套对象遍历问题：无法访问avg动态键值以渲染卡片

我看你遇到的问题是没法正确访问avg对象里的动态键值对吧？其实问题出在你对_.mapValues里的key理解上——这里的key是外层的颜色名称（red、green、blue），而不是avg里面的时间戳键，所以直接用value.avg[key]自然拿不到数据。

下面给你调整后的代码，既能拿到颜色名称，又能遍历avg里的所有动态键值对来渲染卡片：

import _ from 'lodash';

// ...你的组件其他代码

render() { 
  const data = this.state.example; 

  // 遍历颜色对象，生成对应的卡片JSX
  const colorCards = _.mapValues(data, (value, colorName) => {
    // 遍历avg里的时间戳和数值，生成每一行数据
    const avgValues = Object.entries(value.avg).map(([timestamp, num]) => (
      <div key={timestamp}>
        时间戳 {timestamp}: {num}
      </div>
    ));

    return (
      <div key={colorName} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}>
        <div style={{ fontWeight: 'bold' }}>颜色名称: {colorName.charAt(0).toUpperCase() + colorName.slice(1)}</div>
        <div>Avg 数据:</div>
        {avgValues}
      </div>
    );
  });

  return (
    <div>
      {Object.values(colorCards)} {/* 把mapValues返回的对象转成数组渲染 */}
    </div>
  );
}

关键点说明： #

• 用_.mapValues遍历外层颜色对象时，colorName就是red、green这些键，用来显示颜色名称；
• 用Object.entries(value.avg)把avg对象转成键值对数组，这样就能遍历所有动态的时间戳和对应的数值；
• 给每个动态生成的React元素加上key属性，符合React列表渲染的要求；
• 最后把_.mapValues返回的对象通过Object.values()转成数组，才能在JSX里直接渲染。

如果不想用lodash，也可以用原生的Object.entries来遍历外层数据，代码会更简洁：

render() { 
  const data = this.state.example; 

  const colorCards = Object.entries(data).map(([colorName, value]) => {
    const avgValues = Object.entries(value.avg).map(([timestamp, num]) => (
      <div key={timestamp}>
        时间戳 {timestamp}: {num}
      </div>
    ));

    return (
      <div key={colorName} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}>
        <div style={{ fontWeight: 'bold' }}>颜色名称: {colorName.charAt(0).toUpperCase() + colorName.slice(1)}</div>
        <div>Avg 数据:</div>
        {avgValues}
      </div>
    );
  });

  return (
    <div>
      {colorCards}
    </div>
  );
}

这样就能完美渲染出每个颜色对应的卡片，包含颜色名称和所有avg里的数值啦！

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