Javascript 根据用户Id将相同的键推入表行

因此，我从一个API获取数据，该API返回：

appointments: [0: {customerId: 1, customerName: john, serviceName: serviceName1, start: {dateTime:"15:00"}, end: {dateTime:"16:00"}},
1: {customerId: 2, customerName: doe, serviceName: serviceName2, start: {dateTime:"14:00"}, end: {dateTime:"15:00"}},
2: {customerId: 2, customerName: doe,serviceName: serviceName3 , start: {dateTime:"12:00"}, end: {dateTime:"13:00"}}]

我的代码片段

render() {
return (
  <div>
    <Table>
      <thead>
        <tr>
          <th scope="col">room</th>
          <th scope="col">customer name</th>
          <th scope="col">serviceName1</th>
          <th scope="col">serviceName 2</th>
          <th scope="col">serviceName 3</th>
          <th scope="col">other</th>
        </tr>
      </thead>
      <tbody>
        {this.state.appointments.map((appointments: any, index) => {
          return (
            <tr key={appointments.customerId}>
              <td>{index + 1}</td>
              <td>{appointments.customerName}</td>
              {}
              <td>{`${formatDateTime(
                appointments.start?.dateTime
              )} - ${formatDateTime(appointments.end?.dateTime)}`}</td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  </div>

render（）{
返回(
房间
客户名称
服务名称1
服务名称2
服务名称3
其他
{this.state.appoinces.map（（约会：任意，索引）=>{
返回(
{index+1}
{约会.客户名称}
{}
{`${formatDateTime(
约会。开始？日期时间
)}-${formatDateTime（约会.end？.dateTime）}`}
);
})}

我的问题是，如何根据客户Id将他的两项服务（serviceName 2和serviceName 3）推送到同一行中，并且每一行在适当的标题中填写每个服务的时间

---

试试这个，我添加了索引作为键，因为在您的例子中，索引是唯一的

render() {
return (
  <div>
    <Table>
      <thead>
        <tr key="heading">
          <th scope="col">room</th>
          <th scope="col">customer name</th>
          <th scope="col">serviceName1</th>
          <th scope="col">serviceName 2</th>
          <th scope="col">serviceName 3</th>
          <th scope="col">other</th>
        </tr>
      </thead>
      <tbody>
        {this.state.appointments.map((appointments: any, index) => {
          return (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{appointments.customerName}</td>
              <td>{`${formatDateTime(
                appointments.start?.dateTime
              )} - ${formatDateTime(appointments.end?.dateTime)}`}</td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  </div>

render（）{
返回(
房间
客户名称
服务名称1
服务名称2
服务名称3
其他
{this.state.appoinces.map（（约会：任意，索引）=>{
返回(
{index+1}
{约会.客户名称}
{`${formatDateTime(
约会。开始？日期时间
)}-${formatDateTime（约会.end？.dateTime）}`}
);
})}

您可以预处理数据，将重复项减少到单个条目中，以便在UI中进行映射。将服务和时间合并到嵌套数组中，以映射到其他服务列中

Object.values(
  data.reduce(
    (dataObj, current) => ({
      ...dataObj,
      [current.customerId]: {
        ...dataObj[current.customerId],
        customerId: current.customerId,
        customerName: current.customerName,
        services: (dataObj[current.customerId]?.services || []).concat({
          serviceName: current.serviceName,
          start: current.start,
          end: current.end
        })
      }
    }),
    {}
  )
);

const数据=[
{
客户ID:1，
顾客名称：“约翰”，
serviceName:“serviceName1”，
开始：{dateTime:“15:00”}，
结束：{dateTime:“16:00”}
},
{
客户ID:2，
客户名称：“doe”，
serviceName:“serviceName2”，
开始：{dateTime:“14:00”}，
结束：{dateTime:“15:00”}
},
{
客户ID:2，
客户名称：“doe”，
serviceName:“serviceName3”，
开始：{dateTime:“12:00”}，
结束：{dateTime:“13:00”}
}
];
const processedData=Object.values(
数据还原(
（数据对象，当前）=>({
…dataObj，
[当前.客户ID]：{
…dataObj[current.customerId]，
customerId:current.customerId，
customerName:current.customerName，
服务：（dataObj[current.customerId]？.services | |[]）.concat({
serviceName:current.serviceName，
开始：current.start，
结束：当前。结束
})
}
}),
{}
)
);
console.log（processedData）

如果

约会。customerId

本身不能提供所需的唯一性保证，那么请尝试组合提供的属性，如果仍然不起作用，则预处理您的

约会

状态，以包括一个新的GUID

id

属性，您可以保证该属性是唯一的。它确实返回un但是如果是同一个客户，那么它返回的两个都是相同的ID。但问题是，我需要检查，如果两个都有相同的ID，换句话说，相同的客户名称，那么将数据放入同一行，每个值放入相应的headerTrue，但是在将一个客户的所有条目挤压到一行之后，ID将是唯一的。啊，那么如果某些数据实体属于同一客户，则您希望将它们合并为一行。您可以共享合并行的外观吗？开始/结束日期时间的合并数组？我理解您的问题，请给我一些时间，我将提供一个与他不同的答案wanted@henk元素的键总是唯一的，所以把它作为索引键，因为客户id与per data相同。并将客户id添加为ref={appoints.customerId}以用于另一个操作。