Antd <DatePicker/>设置value后点击出现无限循环问题求助

我想给Antd的<DatePicker/>组件设置value或defaultValue属性，但设置后点击日期选择器，日历会无限跳转到未来。移除这两个属性后日历恢复正常，但无法初始设置日期。

相关代码如下：

import React from "react";
import "./index.css";
import type { DatePickerProps } from "antd";
import { DatePicker, Space } from "antd";
import moment from "moment";

const onChange: DatePickerProps["onChange"] = (date, dateString) => {
  console.log(date, dateString);
};
const day = moment();
const format = "DD.MM.YYYY";

const App: React.FC = () => (
  <Space direction="vertical">
    <DatePicker
      onChange={onChange}
      format={format}
      defaultValue={moment(day)}
    />
  </Space>
);

export default App;

问题原因及修复方案 #

问题出在你重复调用moment(day)——day本身已经是一个moment实例，再用moment包裹会导致内部时间持续刷新，触发日历无限跳转。

修复方法很简单：直接使用已有的moment实例作为defaultValue，不需要再次用moment包裹：

<DatePicker
  onChange={onChange}
  format={format}
  defaultValue={day}
/>

如果使用受控模式（通过value属性绑定日期），要确保传递的是稳定的moment实例，避免在组件渲染时重复创建导致无限重渲染，推荐用useState保存状态：

import React, { useState } from "react";
import "./index.css";
import type { DatePickerProps } from "antd";
import { DatePicker, Space } from "antd";
import moment from "moment";

const onChange: DatePickerProps["onChange"] = (date, dateString) => {
  console.log(date, dateString);
};
const format = "DD.MM.YYYY";

const App: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState(moment());
  
  return (
    <Space direction="vertical">
      <DatePicker
        onChange={(date) => setSelectedDate(date)}
        format={format}
        value={selectedDate}
      />
    </Space>
  );
};

export default App;

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