Javascript react 在具有动态列的表中显示数据

所以，这是可行的解决方案，您可以通过进行一些更改来实现您想要的.此解决方案尚未完全优化，但您会明白的.

因此，为了获得结果，您必须创建一个具有实际日期编号的新数据数组，以便稍后我们可以使用它来过滤dayArr.之后，您必须映射对象的day数组，并判断day是否与数据数组中的day匹配，如果匹配，则替换小时数.

import "./styles.css";
import React from "react";

export default function App() {
  const data = [
    {
      start: "2022-04-02",
      hours: 2
    },
    {
      start: "2022-04-06",
      hours: 3
    },
    {
      start: "2022-04-11",
      hours: 1
    }
  ];


  // filter the data so we can have actual day number
  const filteredData = data.map((item) => {
    const splitDate = item.start.split("-");
    const day = splitDate[splitDate.length - 1];

    return {
      start: parseInt(day),
      hours: item.hours
    };
  });


  const [newData, setNewData] = React.useState();

  const setDataforTable = () => {
    const dataDays = data.map((data) => ({
      day: new Date(data.start).getDate(),
      hours: data.hours
    }));

    setNewData(dataDays);
  };

  const [days, setDays] = React.useState([]);

  const settingDays = () => {
    const daysInMonth = 30;

    let dayInfo = [];
    for (let i = 1; i <= daysInMonth; i++) {
      dayInfo.push(i)

      // create an array and fill hours with 0
      const dayArr = dayInfo.map((day) => ({
        day: day,
        hours: 0
      }));


      // map over dayArr and replace the hours 
      let temp = [...dayArr];
      dayArr.map((i, idx) => {
        const getHours = filteredData.filter((item) => item.start === i.day);
        if (getHours.length) {
          const newData = {
            day: i.day,
            hours: getHours[0].hours
          };
          temp[idx] = newData;
        }
      });

      setDays(temp);
    }
  };

  const totalHours = data.map((i) => i.hours).reduce((a, b) => a + b, 0);

  let tableDisplay;


  if (days.length) {
    //convertData();
    tableDisplay = (
      <div>
        <table>
          <thead>
            <tr>
              <th> Date </th>
              {days.map((i) => (
                <th key={i}>{i?.day}</th>
              ))}
              <th>Total Hours</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Hours</td>
              {/* {newData &&
                
              } */}
              {days && days.map((d) => <td>{d.hours}</td>)}
              <td>{totalHours}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }

  return (
    <div>
      <button
        onClick={() => {
          setDataforTable();
          settingDays();
        }}
      >
        Click
      </button>
      {tableDisplay}
    </div>
  );
}