如何修复Ant Design日期时间范围选择器月份连续自动切换问题

问题现象 #

使用Ant Design的日期时间范围选择器（RangePicker）时，首次选择日期时间功能正常，但尝试修改已选的日期时间时，会出现月份连续自动切换的异常情况。

问题原因 #

你的代码中，在RangePicker的value属性里，每次组件渲染都会通过moment(start)和moment(end)创建新的Moment实例。由于React会通过引用比较判断值是否变化，每次生成的新Moment实例会被组件认为是值发生了改变，从而触发不必要的重渲染，最终导致月份连续切换的异常。

修复方案 #

方案1：直接存储Moment实例到状态 #

将状态改为存储Moment实例，而非字符串，确保每次渲染时value的引用稳定：

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

const App = () => {
  // 初始状态为[null, null]，表示未选择日期
  const [dateRange, setDateRange] = useState([null, null]);

  const handleRange = (datetimeRangeUTC, datetimeRangeLocal) => {
    // 直接将Moment实例存入状态
    setDateRange(datetimeRangeLocal);
  };

  return (
    <div>
      <Space direction="vertical" size={12}>
        <RangePicker
          showTime={{ format: "HH:mm" }}
          format="YYYY-MM-DD HH:mm"
          value={dateRange}
          onChange={handleRange}
          placeholder={["YYYY-MM-DD HH:mm", "YYYY-MM-DD HH:mm"]}
        />
      </Space>
    </div>
  );
};

export default App;

方案2：使用useMemo缓存Moment实例 #

如果需要保留字符串格式的状态，可以用useMemo缓存Moment实例，仅当状态变化时才重新生成：

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

const App = () => {
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");

  // 仅当start或end变化时，才重新创建Moment实例
  const rangeValue = useMemo(() => {
    return [start ? moment(start) : null, end ? moment(end) : null];
  }, [start, end]);

  const handleRange = (datetimeRangeUTC, datetimeRangeLocal) => {
    // 将Moment实例格式化为字符串存入状态
    setStart(datetimeRangeLocal[0].format("YYYY-MM-DD HH:mm"));
    setEnd(datetimeRangeLocal[1].format("YYYY-MM-DD HH:mm"));
  };

  return (
    <div>
      <Space direction="vertical" size={12}>
        <RangePicker
          showTime={{ format: "HH:mm" }}
          format="YYYY-MM-DD HH:mm"
          value={rangeValue}
          onChange={handleRange}
          placeholder={["YYYY-MM-DD HH:mm", "YYYY-MM-DD HH:mm"]}
        />
      </Space>
    </div>
  );
};

export default App;

方案说明 #

两种方案的核心都是保证RangePicker的value属性引用稳定，避免每次渲染都生成新的Moment实例，从而消除不必要的重渲染，解决月份自动切换的问题。

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