ReactJS中使用moment格式化日期时状态无法正确更新

问题分析 #

你遇到的核心问题是React的状态更新是异步操作：调用setDates后，组件状态不会立即变更，所以紧接着的console.log(dates)输出的还是更新前的旧值，并非格式化后的新日期。

另外需要确认：你使用的RangePicker（大概率是Ant Design组件）的onChange回调返回的values是moment对象或Date对象，确保moment(item).format("YYYY-MM-DD")能正确生成字符串格式的日期。

解决方案 #

1. 正确监听状态更新后的结果 #

不要在调用setDates后立即打印状态，改用useEffect监听dates的变化，当状态真正更新后再执行打印或其他逻辑：

import { useEffect, useState } from 'react';
import moment from 'moment';
import { RangePicker } from 'antd';

const YourComponent = () => {
  const [dates, setDates] = useState([]);

  const onDateChange = (values) => {
    setDates(values.map(item => moment(item).format("YYYY-MM-DD")));
  };

  // 监听dates状态变化，更新后打印
  useEffect(() => {
    console.log("更新后的dates:", dates);
  }, [dates]);

  return (
    <RangePicker onChange={onDateChange} />
  );
};

2. （可选）使用setState的回调函数（React 18前兼容） #

函数组件的setState支持传入第二个回调参数，在状态更新完成后执行：

const onDateChange = (values) => {
  setDates(
    values.map(item => moment(item).format("YYYY-MM-DD")),
    () => {
      console.log("更新后的dates:", dates);
    }
  );
};

注意：React 18的严格模式下，这个回调可能会执行两次，更推荐用useEffect的方式。

3. 确保moment依赖正确配置 #

确认已经安装moment并正确导入：

npm install moment --save

在组件中导入：

import moment from 'moment';
// 如果需要中文日期格式，导入中文locale
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

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