如何复现并修复React中Date显示偏移一天的问题？

复现步骤 #

• 调整浏览器时区到UTC以西的区域，比如美国太平洋时区（UTC-8）：
  在Chrome中操作：打开开发者工具（F12）→ 点击右上角菜单按钮 → 选择「更多工具」→「传感器」→ 在「地理位置」下拉列表中选择「洛杉矶，美国」
• 在浏览器控制台执行以下代码：

  new Date("2020-11-24T00:00:00").toLocaleDateString();
  

• 此时就能得到类似23/11/2020（取决于浏览器地区格式设置）的结果。

问题根源 #

你使用的ISO格式日期字符串2020-11-24T00:00:00不带时区偏移，浏览器会默认将其解析为UTC（GMT+0）时间。如果用户所在时区的UTC偏移为负数（即位于UTC以西，比如美洲大部分地区），UTC的00:00:00换算到他们的本地时间就是前一天的下午/傍晚，toLocaleDateString()会基于本地时间的日期部分返回，因此显示为前一天的日期。

额外可能的触发场景 #

• 用户使用了较旧的浏览器（如IE10及更早版本），这类浏览器对ISO日期格式的解析规则存在差异
• 用户手动修改了系统或浏览器的时区设置，而非使用默认的本地时区

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