React JS UseState 每周显示标题 Time sheet

Question

我正在努力使用 useState 实现一个时间表组件以做出反应。我对某些功能以及它在幕后的工作方式有点困惑（我还在学习伙计们）。当我点击前一周或下周控制按钮时，日期以随机方式变化，而不是显示当前月份的下周日期或前一周日期。 另一个问题是，每当我开始输入输入时，标题上的日期也会随机变化。

我在这里遗漏了一些东西，非常感谢您的帮助。谢谢

const TimeSheet = () => {

  const days = ["Mon", "Tue", "Wed", "Thurs", "Fri", "Sat", "Sun"];
  const [startDate, setStartDate] = useState(new Date());
  const [data, setData] = useState([
    { project: 'Project A', hours: [0, 0, 0, 0, 0, 0, 0], total: 0 },
    { project: 'Project B', hours: [0, 0, 0, 0, 0, 0, 0], total: 0 },
  ]);

  const handlePreviousWeek = () => {
    // setStartDate(new Date(startDate.setDate(startDate.getDate() - 7)));

    const prevWeek = new Date(startDate);
    prevWeek.setDate(startDate.getDate() - 7);
    setStartDate(prevWeek);
  };

  const handleNextWeek = () => {
    // setStartDate(new Date(startDate.setDate(startDate.getDate() + 7)));
    const nextWeek = new Date(startDate);
    nextWeek.setDate(startDate.getDate() + 7);
    setStartDate(nextWeek);
  };

  const handleAddRow = () => {
    setData([
      ...data,
      { project: `Project ${data.length + 1}`, hours: [0, 0, 0, 0, 0, 0, 0], total: 0 },
    ]);
  };

  const handleDeleteRow = (index) => {
    const updatedData = [...data];
    updatedData.splice(index, 1);
    setData(updatedData);
  };

  const handleSaveHours = () => {
    console.log('Hours saved:', data);
  };

  // const calculateTotal = (hours) => {
  //   let total = 0;
  //   for (let i = 0; i < hours.length; i++) {
  //     total += parseInt(hours[i]) || 0;
  //   }
  //   return total;
  // };

  const handleHoursChange = (projectIndex, dayIndex, value) => {
    const updatedData = [...data];
    updatedData[projectIndex].hours[dayIndex] = value;
    updatedData[projectIndex].total = updatedData[projectIndex].hours.reduce(
      (acc, cur) => acc + cur,
      0
    );
    setData(updatedData);
  };

  return (
    <div>
      <h1>Project Simple Time Sheet</h1>
      <div>
        <button onClick={handlePreviousWeek}>Previous Week</button>
        {/* <span>{startDate.toLocaleDateString("de-DE")}</span> */}
        <span>{`${startDate.toLocaleDateString('de-DE')} - ${new Date(
              startDate.setDate(startDate.getDate() + 6)
            ).toLocaleDateString('de-DE')}`}</span>
        <button onClick={handleNextWeek}>Next Week</button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Project</th>

            {/* {Array.from({ length: 7 }).map((_, index) => (
              <th key={index}>{new Date(startDate.setDate(startDate.getDate() + 1)).toLocaleDateString("de-DE")}</th>
            ))} */}

          {days.map((day) => (
                  <th key={day}>
                    {day}
                    <br />
                    {new Date(
                      startDate.getFullYear(),
                      startDate.getMonth(),
                      startDate.getDate() + days.indexOf(day)
                    ).toLocaleDateString('de-DE')}
                  </th>
                ))}
            <th>Total</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            
            <tr key={index}>
              <td>{item.project}</td>
              {item.hours.map((hour, dayIndex) => (
                <td key={dayIndex}>
                  <input type="number" value={hour} onChange={(e) => handleHoursChange(index, dayIndex,     e.target.value)} />
                </td>
              ))}
              <td>
                {item.total}
            
              
              </td>
              <td><button onClick={() => handleDeleteRow(index)}>Delete</button></td>
            </tr>
          ))}
          <tr>
            <td></td>
            {Array.from({ length: 7 }).map((_, index) => <td key={index}></td>)}
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <button onClick={handleAddRow}>Add Row</button>
      <button onClick={handleSaveHours}>Save Hours</button>
      <button onClick={() => console.log('Hours submitted:', data)}>Submit</button>
    </div>
  );
};

export default TimeSheet;