在数组内部映射对象内的日期时显示信息而不重复名称

Question

所以我想显示一个 table，显示特定球员一天的状态出勤率（出场、缺席、生病、受伤、迟到） .在每个对象中我们都有球员和当天的状态。

这是我选择的结构，因为即使是后端发送，它看起来也是最好的结构。但我不确定那是否是最好的。如果您对其他结构有其他建议，我们将很高兴听到。

我正在努力显示此人在特定日期的状态。我知道如何显示地图

click to see the table that i need to do for a better visualization

现在我只需要在字符串中显示状态，然后再花哨的东西。如果有人能看一下这个，我将不胜感激

这是 link 代码可以更好地工作 : https://stackblitz.com/edit/react-gdpfjh?file=src%2FApp.js

代码

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [overall, setoverall] = useState([
    {
      date: '01-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'present' },
        { playerName: 'Gimi', playerId: '2', status: 'absent' },
      ],
    },
    {
      date: '03-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'absent' },
        { playerName: 'Gimi', playerId: '2', status: 'absent' },
      ],
    },
    {
      date: '05-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'present' },
        { playerName: 'Gimi', playerId: '2', status: 'present' },
      ],
    },
    {
      date: '08-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'present' },
        { playerName: 'Gimi', playerId: '2', status: 'injured' },
      ],
    },
  ]);
  return (
    <div>
      <table border="1px" width="100%">
        <tbody>
          <tr>
            <th width="100px"></th>
            {overall.map((item) => (
              <th key={item.date}>{item.date}</th>
            ))}
          </tr>
          {overall[0].attendance.map((item) => (
            <tr key={item.playerId}>
              <td>{item.playerName}</td>
              <td>{item.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Answer 1

您需要中的球员。它知道这一点，因为您在另一个问题上对我进行了 ping 操作。但是你应该像大卫说的那样添加更多的上下文。

您可以找到代码here

在数组内部映射对象内的日期时显示信息而不重复名称

showing info while mapping inside of array for date inside an object without repeating names

html

javascript

time-and-attendance

web

reactjs