🧐[问题]页面上有个倒计时定时器，打开表格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]

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.

---

Docs are dead. Just use Dosu.