React Hooks结合Firebase开发时间选择器提交功能时出现ReferenceError: time is not defined错误求助

看起来你遇到的核心问题是代码里多处变量不匹配、逻辑错位导致的time未定义错误，咱们一步步拆解并修复：

问题分析 #

• 变量名不匹配：时间选择器的onChange调用了setDelay，但你在MorningDelay组件里并没有定义delay状态；提交时需要的time变量也完全没声明。
• 提交逻辑错位：你把Firebase的提交逻辑放在了组件挂载时执行的useEffect里，但实际需求是点击按钮才提交，这直接导致挂载时就去读取不存在的time变量。
• 函数绑定错误：按钮的onClick绑定了DelayMorning，但你的代码里根本没有这个函数，反而定义了MorningDelay，属于明显的命名错误。

修正后的完整代码示例 #

import { useState } from 'react';
import { Container, TextField, Button } from '@mui/material'; // 假设你使用Material-UI

export default function MorningDelayForm() {
  // 用state存储选中的时间，默认值与时间选择器保持一致
  const [selectedTime, setSelectedTime] = useState("07:30");
  // 如果需要提交理由，补充对应的state
  const [reason, setReason] = useState("");

  // 点击按钮触发的提交函数
  const handleSubmit = () => {
    // 先校验时间是否有效
    if (!selectedTime) {
      console.error("请选择时间");
      return;
    }

    // 提交到Firebase数据库
    db.collection('delayInTheMorning') // 注意：原集合名Morninh拼写错误，已修正为Morning
      .add({ // 用add添加新文档，如需覆盖特定文档可改用set并指定文档ID
        time: selectedTime,
        reason: reason,
        createdAt: new Date() // 可选：添加时间戳方便后续查询
      })
      .then(() => {
        console.log("时间提交成功！");
        // 提交后可重置表单
        setSelectedTime("07:30");
        setReason("");
      })
      .catch((error) => {
        console.error("提交失败：", error);
      });
  };

  return (
    <Container className={classes.cardContainer}>
      <TextField 
        id="time" 
        label="Zeit" 
        type="time" 
        defaultValue="07:30"
        InputLabelProps={{ shrink: true }}
        inputProps={{ step: 300 }} // 5分钟间隔
        value={selectedTime} // 将state与输入框绑定，确保状态同步
        onChange={(event) => { setSelectedTime(event.target.value); }}
      />
      {/* 可选：添加理由输入框 */}
      <TextField
        label="Grund"
        value={reason}
        onChange={(e) => setReason(e.target.value)}
        margin="normal"
      />
      <Button className={classes.cardBtn} onClick={handleSubmit}>Absenden</Button>
    </Container>
  );
}

关键修正点说明 #

1. 统一状态管理：用selectedTime存储时间选择器的值，确保输入与状态同步，提交时直接使用这个变量，彻底解决time未定义的问题。
2. 调整提交逻辑：移除了不必要的useEffect，将提交逻辑移到按钮点击事件中，符合“点击提交”的需求。
3. 修正函数绑定：按钮的onClick绑定了正确的提交函数handleSubmit，不再引用未定义的DelayMorning。
4. Firebase操作优化：用add方法添加新文档（如需覆盖特定文档可改用set），同时增加错误捕获，方便排查问题；另外纠正了集合名的拼写错误。

额外注意事项 #

• 确保你已正确初始化Firebase，db是有效的Firestore实例。
• 如果classes是自定义样式，要确保样式文件已正确导入。

内容的提问来源于stack exchange，提问作者chin14