反应：为什么我的异步程序不收集两个已更改的变量？

Question

我有一张桌子，桌子多变。您应该能够更改时间值，然后使用“ Tallenna”按钮保存它。

（是的，第七行搞砸了，我只是在测试的时候把那丢了。）

正值：
它几乎按预期工作。如果您将两个值从左到右更改，它会询问您是否要保存这些值，然后将它们正确地保存在正确的行中。

否定项：
几乎一词。如果您在右侧值（09.30）之后更改左侧值（09.00），则根本不会记住最左侧的值。因此，每次要保存时更改左值后，您都需要编辑右值。

---

这是我的一些代码和解释，我试图删除所有不相关的/格式化的代码。

TimeClass

// row = the row in the table
// col = column in the table, 0 = start_time, 1 = end_time
// reservationsData = data from the database {id, name, start_time, end_time}

function TimeClass ({ row, reservationsData, col }) {

  let startPicker = reservationsData[row - 1].start_time;
  let endPicker = reservationsData[row - 1].end_time;
  let timePicker = startPicker;

  if (col === 1) {
    timePicker = endPicker;
  }
  let [time, setTime] = useState(moment(timePicker, "hh:mm:ss").toDate());

  if (col === 0) {
    reservationsData[row - 1].start_time = moment(time, "hh:mm:ss").format("HH:mm:ss");
  } else {
    reservationsData[row - 1].end_time = moment(time, "hh:mm:ss").format("HH:mm:ss");
  }

  return (
    <div>
      <DatePicker
        selected={time}
        onChange={time => setTime(time)}
        showTimeSelect
        showTimeSelectOnly
      />
      <TimeChanger
        row={row}
        col={col}
        reservationsData={reservationsData}
      />
    </div>
  );
}

TimeChanger

function TimeChanger ({ row, reservationsData, col }) {

  let startAt = moment(reservationsData[row - 1].start_time, "hh:mm:ss").format("HH:mm:ss");
  let endAt = moment(reservationsData[row - 1].end_time, "hh:mm:ss").format("HH:mm:ss");

  console.log("Start: " + startAt); // Note, it shows the time correct here
  console.log("End:   " + endAt);

  if (col === 1 && row <= reservationsData.length) {

    // this is where the left changed time isn't visible anymore
    return (
      <div className="table-button-admin">
        <button className="save-massage-time-button table-button" onClick={async changeTimes => {
          if (window.confirm("Change the time to "
            + moment(startAt, "hh:mm:ss").format("HH.mm") + " - "
            + moment(endAt, "hh:mm:ss").format("HH.mm") + "?")) {

            changeTimes.preventDefault();

            await put(`${process.env.API_PATH}/reservations`,
              {
                "id": reservationsData[row - 1].id,
                "name": reservationsData[row - 1].name,
                "start_time": startAt,
                "end_time": endAt
              });

            reload(`${process.env.API_PATH}/reservations`);

          } else {
            return null;
          }
        }}>
          Tallenna // Save
        </button>
      </div>
    );
  }
  return null;
}

我会很乐意回答所有问题。请记住，它可以更新最左边的值，但前提是您必须在此之后更改最右边的值。