如何在React中映射嵌套对象数据实现考勤表格展示？

先假设你的嵌套考勤数据结构大概是这样（如果实际结构不同，对应调整字段名即可）：

const attendanceData = {
  "2024-05-20": {
    employees: [
      { name: "张三", status: "正常出勤" },
      { name: "李四", status: "迟到" }
    ]
  },
  "2024-05-21": {
    employees: [
      { name: "张三", status: "事假" },
      { name: "王五", status: "正常出勤" }
    ]
  }
};

第一步：扁平化嵌套数据 #

嵌套结构没法直接用map遍历，先把它转成扁平数组，每个元素包含日期、姓名、出勤状态三个核心字段：

// 把对象转成[key, value]数组，key是日期，value是对应员工数据
const flattenedAttendance = Object.entries(attendanceData).flatMap(([date, data]) => {
  // 遍历当前日期下的所有员工，给每个员工追加日期字段
  return data.employees.map(employee => ({
    date,
    name: employee.name,
    status: employee.status
  }));
});

flatMap会自动展开嵌套数组，最终得到的flattenedAttendance结构如下：

[
  { date: "2024-05-20", name: "张三", status: "正常出勤" },
  { date: "2024-05-20", name: "李四", status: "迟到" },
  { date: "2024-05-21", name: "张三", status: "事假" },
  { date: "2024-05-21", name: "王五", status: "正常出勤" }
]

第二步：React组件中渲染处理后的数据 #

拿到扁平数组后，就可以直接用map渲染成表格或列表，这里以表格为例：

import React from 'react';

const AttendanceTable = ({ attendanceData }) => {
  // 扁平化数据，同时处理异常情况
  const flattenedAttendance = Object.entries(attendanceData).flatMap(([date, data]) => {
    // 避免空员工列表导致报错
    if (!data.employees || data.employees.length === 0) return [];
    return data.employees.map(employee => ({
      date,
      name: employee.name || '未知姓名', // 处理姓名缺失
      status: employee.status || '未记录' // 处理状态缺失
    }));
  });

  return (
    <table border="1" cellPadding="8">
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
          <th>出勤状态</th>
        </tr>
      </thead>
      <tbody>
        {flattenedAttendance.map((item, index) => (
          <tr key={`${item.date}-${item.name}`}> {/* 用日期+姓名当唯一key，比index更可靠 */}
            <td>{item.date}</td>
            <td>{item.name}</td>
            <td>{item.status}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

// 组件使用示例
const App = () => {
  const attendanceData = { /* 你的嵌套考勤数据 */ };
  return <AttendanceTable attendanceData={attendanceData} />;
};

export default App;

关键注意点 #

• 如果你的实际数据字段名不同（比如员工列表叫staff，状态叫attendanceStatus），直接修改flatMap里的字段对应关系即可。
• 渲染时的key尽量用数据里的唯一组合标识（比如日期+员工ID），不要依赖index，避免列表更新时出现渲染异常。
• 必须做异常处理：比如某个日期下无员工数据、字段缺失的情况，防止组件崩溃。

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