第一次单击按钮时“未定义”

Question

目标：设置date和time状态变量。

问题：当我第一次点击appointment__timeSlots按钮时，控制台将打印undefined，并且无法设置状态time变量。

但是，当我单击按钮秒时间时，控制台会按预期方式打印时间。

我正在使用功能组件：

function Appointment() {
  const [date, setDate] = useState(new Date());
  const [time, setTime] = useState();

  const handleDate = (date) => {
    console.log(date);
    setDate(date);
  };

  const handleTime = (e) => {
    e.preventDefault();

    const selectedTime = e.target.value;
    setTime(selectedTime);
    console.log(time);
  };

  // post date & time to db
  const postAppointment = (e) => {
    e.preventDefault();

    db.collection("appointments").add({
      date: date,
      time: time,
    });
  };

这是在页面上呈现的代码：

  return (
    <div className="request__work">
      <div className="calendar">
        <form>
          <Calendar
            className="react-calendar"
            onChange={handleDate}
            value={date}
          />
          <div className="appointment__timeSlots">
            <button
              className="appointment__button"
              value="9:00am"
              onClick={handleTime}
            >
              9:00am
            </button>
          </div>
          <button type="submit" onClick={postAppointment}>
            Request
          </button>
        </form>
      </div>
    </div>
  );
}

这是我单击appointment__timeSlots按钮时发生的屏幕截图：

注意：：在此示例中，我单击appointment__timeSlots按钮三次次，但第一次单击是控制台记录为undefined