React/Next项目中日期转yyyy-mm-dd格式偏移问题求助

一、日期转换出现偏移的问题 #

问题原因 #

date.toISOString()会将本地时间转换为UTC时间输出。比如你拿到的Fri Mar 10 2021 00:00:00 GMT+0100，对应的UTC时间是Thu Mar 09 2021 23:00:00 GMT+0000，截取前10位自然得到2021-03-09，导致日期偏移。

解决方法 #

无需依赖第三方库，可采用两种可靠的本地格式化方式：

1. 手动拼接日期字符串

const formatLocalDate = (date) => {
  const year = date.getFullYear();
  // 月份从0开始，需加1，不足两位补0
  const month = String(date.getMonth() + 1).padStart(2, '0');
  // 日期不足两位补0
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 使用示例
const selectedDate = new Date('Fri Mar 10 2021 00:00:00 GMT+0100');
console.log(formatLocalDate(selectedDate)); // 输出2021-03-10

2. 使用Intl.DateTimeFormat格式化
   利用地区格式直接输出yyyy-mm-dd：

const formatLocalDate = (date) => {
  // en-CA地区的默认日期格式为yyyy-mm-dd
  return new Intl.DateTimeFormat('en-CA').format(date);
};

// 使用示例
const selectedDate = new Date('Fri Mar 10 2021 00:00:00 GMT+0100');
console.log(formatLocalDate(selectedDate)); // 输出2021-03-10

如果项目已引入date-fns或moment.js，也可以用库的方法快速格式化，比如date-fns的format(selectedDate, 'yyyy-MM-dd')。

二、setWeekDay后立即打印得到旧值的问题 #

问题原因 #

React的状态更新是异步的，调用setWeekDay后状态不会立即改变，同步代码里打印的自然是更新前的旧值。

解决方法 #

根据组件类型选择对应方案：

1. 函数组件（使用useState）
   通过useEffect监听状态变化，在状态更新后执行操作：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [weekDay, setWeekDay] = useState('');

  const handleDateSelect = () => {
    setWeekDay('Friday'); // 更新状态
  };

  // 监听weekDay变化，更新后触发
  useEffect(() => {
    if (weekDay) {
      console.log(weekDay); // 此处打印更新后的新值
    }
  }, [weekDay]); // 依赖项设置为weekDay

  return <button onClick={handleDateSelect}>Set Weekday</button>;
}

2. 类组件
   使用setState的第二个回调参数，在状态更新完成后执行：

class YourComponent extends React.Component {
  state = { weekDay: '' };

  handleDateSelect = () => {
    this.setState({ weekDay: 'Friday' }, () => {
      // 回调函数内状态已更新
      console.log(this.state.weekDay); // 打印更新后的新值
    });
  };

  render() {
    return <button onClick={handleDateSelect}>Set Weekday</button>;
  }
}

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