在 React 中，若表单的 defaultValues 包含 new Date() 等动态计算值，该值仅在模块首次加载时执行一次，导致后续打开新表单时日期仍为旧值；需改用组件挂载时初始化，而非模块级静态定义。
在 react 中，若表单的 `defaultvalues` 包含 `new date()` 等动态计算值，该值仅在模块首次加载时执行一次，导致后续打开新表单时日期仍为旧值；需改用组件挂载时初始化，而非模块级静态定义。
问题根源在于 consts.jsx 中的 defaultValues 是模块级常量（module-scoped constant），而非每次渲染时重新求值的表达式：
// ❌ 错误：模块加载时只执行一次，startDate 被“冻结”为初始时间
export const defaultValues = {
name: "",
description: "",
startDate: new Date(new Date().setHours(0, 0, 0, 0)), // ← 执行一次，永不更新
endDate: "",
status: "DRAFT"
};
当用户首次访问 /project/new 时，useState(defaultValues) 会读取这个“冻结”的对象；即使第二天再打开，模块未重载，defaultValues.startDate 仍是昨天的时间戳。
✅ 正确做法是：将默认值逻辑移入组件内部，在每次组件挂载时动态生成。推荐两种方案：
方案一：在 useState 初始化函数中动态计算（推荐）
import { useState, useEffect } from 'react';
export default function NewProject() {
// ✅ 每次组件创建时都重新计算当前日期
const [formValues, setFormValues] = useState(() => ({
name: "",
description: "",
startDate: new Date(new Date().setHours(0, 0, 0, 0)),
endDate: "",
status: "DRAFT"
}));
// 可选：监听路由变化或组件卸载时重置（如使用表单草稿缓存场景）
useEffect(() => {
return () => {
// 组件卸载时可清理副作用（如取消请求、清除 localStorage 草稿）
// 但注意：此处无需手动重置 formValues —— 下次挂载自然重建
};
}, []);
// ... 表单渲染与处理逻辑
}
✅ 优势：简洁、无副作用、符合 React 初始化语义；
useState(() => {...})的函数只在首次渲染时调用，确保每次新建表单都获得新鲜的默认值。
方案二：使用 useEffect 首次挂载时设置（备选）
const [formValues, setFormValues] = useState({});
useEffect(() => {
setFormValues({
name: "",
description: "",
startDate: new Date(new Date().setHours(0, 0, 0, 0)),
endDate: "",
status: "DRAFT"
});
}, []); // 空依赖数组 → 仅挂载时执行
⚠️ 注意事项：
- 不要将
new Date()放在模块顶层或const声明中用于表单默认值； - 若需支持表单草稿自动保存（如用户离开前暂存），应明确区分「默认值」与「恢复值」，并用
useEffect+localStorage或路由state控制； -
useEffect清理函数（return () => {...}）适用于释放资源（如定时器、订阅），不应用于重置 state —— 因为组件卸载后 state 本就不存在，重置无意义；真正需要的是「每次挂载时初始化正确值」。
总结：React 表单的“默认值”应是惰性求值、组件生命周期内有效的，而非静态常量。把 new Date() 移入 useState 初始化函数或 useEffect 挂载逻辑中，即可彻底解决日期滞留问题。
