🧐[问题]页面上有个倒计时定时器，打开表格form表单dateRange日期区间选择器

[jiayapengapp]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

页面上有个倒计时定时器，打开表格form表单dateRange日期区间选择器，默认了30天的日期，点击下拉框打开之后不能切换月份，每秒都会切换回当前默认的月份，手动选择一次之后才可已正常选择

💻 示例代码

{ title: '开播日期', dataIndex: 'liveStartDate', align: 'center', valueType: 'dateRange', sorter: true, // 启用排序 search: { transform: (value) => { return { liveStartDate: value[0], liveEndDate: value[1], }; }, }, render: (value, record) => { return <div style={dayjs().format(dateFormat) == dayjs(record.liveStartDate).format(dateFormat) ? { color: 'red' } : {}}> {record.liveStartDate} （{getWeek(record.liveStartDate)}） } },

useEffect(() => { formRef.current.setFieldsValue({ liveStartDate: [dayjs().format(dateFormat), dayjs().add(30, 'day').format(dateFormat)], }) ststusRef.current = ''; getTime(); getList(); return () => { if (timerRef.current) { clearInterval(timerRef.current); } }; }, []); const getList = async (queryParams?: queryParams) => { if (queryParams?.isRefresh) { actionRef?.current?.reload(); } else { actionRef.current?.reloadAndRest(); } setSecond(60); setTimeout(() => { startTimer(); }, 50); }

🚑 其他信息

[dosubot[bot]]

Hi @jiayapengapp! I'm Dosu and I’m helping the pro-components team.

你的问题是由于倒计时定时器或 getList 函数反复调用 formRef.current.setFieldsValue，每次都把 dateRange 的值重置为默认的 30 天区间，导致日期选择器面板每秒都跳回默认月份，无法正常切换月份。只有你手动选择一次日期后，值才会真正改变，picker 才不会再被强制重置，可以正常切换月份。

解决方法：只在初始化时设置一次默认日期，不要在定时器或 getList 里反复调用 setFieldsValue。如果需要刷新数据，只刷新表格，不要重置表单的日期区间。推荐用 React 的 state 或 form 的值来管理日期区间，只在用户主动选择或确实需要变更时才更新。

示例代码：

const [dateRange, setDateRange] = useState([dayjs().format(dateFormat), dayjs().add(30, 'day').format(dateFormat)]);

useEffect(() => {
  formRef.current.setFieldsValue({ liveStartDate: dateRange });
  // 只初始化一次，不要在 getList 或定时器里重复设置
}, []);

const handleDateChange = (value) => {
  setDateRange(value);
  formRef.current.setFieldsValue({ liveStartDate: value });
};

// 在 ProTable 的 columns 里
{
  title: '开播日期',
  dataIndex: 'liveStartDate',
  valueType: 'dateRange',
  fieldProps: {
    value: dateRange,
    onChange: handleDateChange,
  },
  // 其他配置...
}

这样 picker 的值只会在初始化和用户选择时更新，不会被定时器反复重置，切换月份就不会卡住了。

相关原理和建议可参考 Ant Design 官方文档 和 pro-components 相关 issue。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}