使用reduce反应变换数据

Question

我需要使用React来转换以下结构。

export const bodyRows = [
  {
    row: [{ cell: "Name" }, { cell: "Allan, Trent" }, { cell: "Smith, Nathan" }, { cell: "Howard, Greg" }],
  },
  {
    row: [{ cell: "Student ID" }, { cell: 332 }, { cell: 333 }, { cell: 334 }, { cell: 335 }, { cell: 356 }],
  },
  {
    row: [{ cell: "Studkey" }, { cell: "333-B" }, { cell: "334-B" }, { cell: "335-B" }, { cell: "336-B" }, { cell: "332-B" }],
  },
  {
    row: [{ cell: "Name" }, { cell: "Smith, Trent" }, { cell: "Ryan, Nathan" }, { cell: "Johnson, Greg" }],
  },
  {
    row: [{ cell: "Student ID" }, { cell: 232 }, { cell: 233 }, { cell: 234 }, { cell: 235 }, { cell: 256 }],
  },
  {
    row: [{ cell: "Studkey" }, { cell: "233-B" }, { cell: "234-B" }, { cell: "235-B" }, { cell: "236-B" }, { cell: "232-B" }],
  },
  {
    row: [{ cell: "Name" }, { cell: "Lewis, Trent" }, { cell: "Roberts, Nathan" }, { cell: "Roberts, Greg" }],
  },
  {
    row: [{ cell: "Student ID" }, { cell: 132 }, { cell: 133 }, { cell: 134 }, { cell: 135 }, { cell: 156 }],
  },
  {
    row: [{ cell: "Studkey" }, { cell: "133-B" }, { cell: "134-B" }, { cell: "135-B" }, { cell: "136-B" }, { cell: "132-B" }],
  },
];

我有以下内容，但无法使其正常工作。有人可以建议如何解决这个问题吗？

const bodyRows = studentHistory.map((students) => ({
    row: [{ cell: "Name" }, { cell: students.studentName }],
    row: [{ cell: "Student ID" }, { cell: students.studentId }],
    row: [{ cell: "Studkey" }, { cell: students.studentHistoryId }],
  }));

输出示例：

Answer 1

为此，您需要使用 Array.reduce 方法。

const studentHistory_1 = [
  {
    studentName: "Allan, Trent",
    studentId: 332,
    studentHistoryId: "333-B"
  },
  {
    studentName: "Allan-2",
    studentId: 331,
    studentHistoryId: "333-c"
  },
  {
    studentName: "Huge",
    studentId: 3321,
    studentHistoryId: "333-s"
  },
  {
    studentName: "Jackman",
    studentId: 3211,
    studentHistoryId: "333-g"
  }
];

const studentHistory_2 = [
  {
    studentName: "Allan, Trent",
    studentId: 232,
    studentHistoryId: "232-B"
  },
  {
    studentName: "Allan-2",
    studentId: 233,
    studentHistoryId: "233-c"
  },
  {
    studentName: "Huge",
    studentId: 234,
    studentHistoryId: "234-s"
  },
  {
    studentName: "Jackman",
    studentId: 235,
    studentHistoryId: "235-g"
  }
];

const studentHistory_3 = [
  {
    studentName: "Allan, Trent",
    studentId: 132,
    studentHistoryId: "132-B"
  },
  {
    studentName: "Allan-2",
    studentId: 133,
    studentHistoryId: "133-c"
  },
  {
    studentName: "Huge",
    studentId: 134,
    studentHistoryId: "134-s"
  },
  {
    studentName: "Jackman",
    studentId: 135,
    studentHistoryId: "135-g"
  }
];

const bodyRowsGenerate = studentHistory => {
  return studentHistory.reduce((body, student) => {
    const { studentId, studentName, studentHistoryId} = student;
    student.studentName && body[0].row.push({
      cell : studentName
    }); // For name row
    
     student.studentId && body[1].row.push({
      cell : studentId
    }); // For id row
    
     student.studentName && body[2].row.push({
      cell : studentHistoryId
    }); // For key row
    
    return body;
  },[
    {
      row: [{ cell: "Name" }]
    },
    {
      row: [{ cell: "Student ID" }]
    }, 
    {
      row: [{ cell: "Studkey" }]
    }
  ]);
}

const bodyRows = [
  ...bodyRowsGenerate(studentHistory_1),
  ...bodyRowsGenerate(studentHistory_2),
  ...bodyRowsGenerate(studentHistory_3),
];

console.dir(bodyRows)

Answer 2

我看到您正在尝试将数据转换为表格，但我认为您的代码有点混乱：

1. 您将覆盖

   row

   函数中的

   .map()

   属性，因此只会显示最后一个

   row

   。您是否尝试在同一个对象中包含多行？

2. 另外，您能否澄清一下您希望表格的结构如何？从示例图像来看，您似乎希望数据以“姓名”、“学生 ID”和“Studkey”作为标题水平显示，但我只想确保我走在正确的轨道上。

一旦我有了更多背景信息，我会尽力帮助您解决问题