使用Day.js设置datetime-local输入框默认值失效，求错误排查

我尝试为datetime-local类型的输入框设置默认日期，但未能生效。我的代码如下：

const [defaultDateFrom, setDefaultDateFrom] = useState<dayjs | null>(null);

const dd = new Date(currentYear, currentMonth, currentDay, 10);
const d = dayjs(dd).add(1, 'day');
setDefaultDateFrom(d);

<section className="date-container">
  <input type="datetime-local" value={defaultDateFrom} />
</section>

请问我哪里出错了？

你的代码存在两个核心问题：

1. 直接在组件顶层调用状态更新函数 #

setDefaultDateFrom(d)直接写在组件函数的顶层逻辑中，会导致每次组件渲染都触发状态更新，进而引发无限重渲染循环，同时也无法正确设置初始默认值。

2. 不符合datetime-local的value格式要求 #

datetime-local类型的输入框要求value必须是符合ISO 8601标准的字符串（格式为YYYY-MM-DDTHH:mm，比如2024-05-20T14:30），但你直接传入了dayjs对象，浏览器无法识别该类型，因此无法显示默认值。

修正后的代码示例 #

import { useState, useEffect } from 'react';
import dayjs from 'dayjs';

const YourComponent = () => {
  // 状态类型改为string，匹配datetime-local要求的格式
  const [defaultDateFrom, setDefaultDateFrom] = useState<string>('');

  useEffect(() => {
    // 计算目标日期
    const targetDate = new Date(currentYear, currentMonth, currentDay, 10);
    // 转换为datetime-local支持的格式
    const formattedDate = dayjs(targetDate).add(1, 'day').format('YYYY-MM-DDTHH:mm');
    setDefaultDateFrom(formattedDate);
  }, [currentYear, currentMonth, currentDay]); // 依赖项变化时才重新计算

  return (
    <section className="date-container">
      <input type="datetime-local" value={defaultDateFrom} />
    </section>
  );
};

export default YourComponent;

关键修正点 #

• 用useEffect包裹日期计算和状态更新逻辑，确保只在currentYear/currentMonth/currentDay变化时执行，避免无限重渲染
• 调用dayjs的format('YYYY-MM-DDTHH:mm')方法，将日期对象转换为输入框支持的字符串格式
• 调整状态类型为string，避免类型不匹配的问题

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