React中如何映射含动态键的对象？附示例数据求助

嘿，这个问题其实挺常见的——当你遇到对象里的键是动态生成的情况，确实没法直接用map遍历对象，得先把它转换成React能处理的数组形式才行。我给你几个实用的解决方案：

因为你要渲染的核心是每个活动的数据，动态键更多是作为唯一标识存在，所以可以用Object.values()把对象里的所有活动值提取成数组，再用map渲染：

import React from 'react';

const ActivityList = () => {
  const arr = [
    {
      2671161009: {
        activityType: 'RUNNING',
        averageHeartRateInBeatsPerMinute: 134,
        comments: '',
        durationInSeconds: 3884,
        startTimeInSeconds: 1525368621,
        startTimeOffsetInSeconds: -14400,
        summaryId: '2671161009',
      },
      2671161249: {
        activityType: 'OTHER',
        averageHeartRateInBeatsPerMinute: 111,
        comments: '',
        durationInSeconds: 103,
        startTimeInSeconds: 1525372533,
        startTimeOffsetInSeconds: -14400,
        summaryId: '2671161249',
      },
    },
  ];

  // 提取数组第一个元素里的所有活动对象
  const activities = Object.values(arr[0]);

  return (
    <div className="activity-list">
      <h2>我的活动记录</h2>
      {activities.map((activity) => (
        <div key={activity.summaryId} className="activity-item">
          <h3>活动类型：{activity.activityType}</h3>
          <p>平均心率：{activity.averageHeartRateInBeatsPerMinute} bpm</p>
          <p>持续时长：{Math.floor(activity.durationInSeconds / 60)}分钟</p>
          {/* 可根据需求添加更多字段渲染 */}
        </div>
      ))}
    </div>
  );
};

export default ActivityList;

这里Object.values(arr[0])会把动态键对应的所有活动对象转换成数组，让React可以直接用map遍历。另外，React要求列表项必须有唯一key，用每个活动自带的summaryId就很合适，它和动态键是一致的，属于天然的唯一标识。

如果你需要用到那个动态生成的键（比如作为额外ID展示），可以用Object.entries()，它会返回一个包含[动态键, 活动对象]的数组：

// 替换上面的activities定义和map渲染部分
const activityEntries = Object.entries(arr[0]);

return (
  <div className="activity-list">
    <h2>我的活动记录</h2>
    {activityEntries.map(([activityKey, activity]) => (
      <div key={activityKey} className="activity-item">
        <h3>活动ID：{activityKey}</h3>
        <p>类型：{activity.activityType}</p>
        <p>平均心率：{activity.averageHeartRateInBeatsPerMinute} bpm</p>
      </div>
    ))}
  </div>
);

这里的activityKey就是那个动态生成的数字键，你可以把它展示出来或者用于其他逻辑，同时用它作为key也是完全稳妥的，因为它本身就是唯一的。

• 如果你的arr数组可能包含多个元素（不止一个对象），那需要先遍历arr数组，再处理每个元素里的动态键对象：

{arr.map((activityObj) => {
  const activities = Object.values(activityObj);
  return activities.map((activity) => (
    <div key={activity.summaryId} className="activity-item">
      {/* 渲染内容 */}
    </div>
  ));
})}

• 尽量避免用数组索引作为key，因为如果数据顺序发生变化，会导致React渲染异常，用summaryId或动态键这类唯一标识更可靠。

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