TanStack Query获取数据后柱状图日期从2日而非1日开始的问题

问题根源分析 #

你的核心问题出在JavaScript Date对象的参数规则和原代码的错误处理：

1. JavaScript的Date构造函数中，月份是0索引（0代表1月，11代表12月），而常规业务中后端返回的月份通常是1-12的格式。
2. 原代码day ? day + 1 : 1会把后端返回的1日强制转为2日，直接导致X轴从2日开始展示。

当你修改为day || 0后出现日期提前一天（12日变11日），大概率是时区差异导致：后端按UTC时间统计数据，前端用本地时区解析时，日期被转换为前一天的晚时段，最终显示为前一天。

具体解决方案 #

1. 修正日期构造逻辑（解决从2日开始的问题）

假设后端返回的year是4位数（如2024），month是1-12（代表1月到12月），day是1-31，将代码修改为：

// 正确处理月份的0索引，去掉day的+1操作
const date = new Date(year, month - 1, day);

如果后端返回的month已经是0索引（0=1月），则无需减1，直接写：

const date = new Date(year, month, day);

2. 处理时区偏移问题（解决日期提前一天的问题）

如果修改后仍出现日期偏移，改用UTC方式构造日期，确保前后端时区一致：

// 用UTC构造日期，避免本地时区干扰
const date = new Date(Date.UTC(year, month - 1, day));
// 若需要转为本地时间显示，可后续格式化时处理

3. 验证后端数据格式

先通过console.log(year, month, day)打印后端返回的原始值，确认：

• month是1-12还是0-11
• day是否为1-31的有效日期值
  这能帮你快速定位参数是否匹配Date构造规则。

示例验证 #

假设后端返回year=2024, month=1, day=1：

• 原代码得到的是2024年2月2日（月份没减1+day加1）
• 修正后代码得到2024年1月1日（正确匹配后端统计日期）

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