论Ant Design ProTable 中如何优雅设置搜索框默认值

最近做的几个项目都需要在项目中回显数据，刚好我用的就是Ant Design 的ProTable,官方并没有很明确例子和说明如何去做，有以下几个关键点是要注意的。以下是优化后的解决方案及代码说明：

一、问题原因分析

formRef 初始化问题：未正确初始化 useRef 导致引用为空
时间格式问题：直接使用字符串而非 moment 对象
执行时机问题：表单未完全初始化时设置值

优化后的解决方案

jsx 复制代码

import React, { useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { getList } from './service';
import moment from 'moment';

const columns = [
  {
    title: '时间周期',
    dataIndex: 'created_at',
    valueType: 'dateTimeRange',
    hideInTable: true,
    search: {
      transform: (value) => ({
        start_time: value?.[0],
        end_time: value?.[1],
      }),
    },
  },
];

export default () => {
  const formRef = useRef(null); // 正确初始化 ref
  
  // 使用 moment 对象作为默认值
  const defaultTimeRange = [
    moment().startOf('month'),
    moment().endOf('month')
  ];

  useEffect(() => {
    // 添加空依赖确保只执行一次
    if (formRef.current) {
      // 先设置表单值
      formRef.current.setFieldsValue({
        created_at: defaultTimeRange,
      });
      
      // 延迟提交确保表单渲染完成
      setTimeout(() => {
        formRef.current.submit();
      }, 0);
    }
  }, []); // 空依赖数组确保只运行一次

  return (
    <ProTable
      columns={columns}
      request={getList}
      rowKey="id"
      formRef={formRef}
      search={{
        optionRender: (searchConfig, formProps, dom) => [
          <div key="submit">自定义搜索按钮</div>,
        ],
      }}
    />
  );
};

二、关键改进说明

正确初始化 ref
jsx 复制代码
```
const formRef = useRef(null);
```

使用 moment 对象

jsx 复制代码

moment().startOf('month') // 返回 moment 对象

合理的执行时机控制 • 使用 setTimeout 确保表单渲染完成

• 空依赖的 useEffect 确保初始化逻辑只执行一次

推荐使用异步初始化

jsx 复制代码

useEffect(() => {
  const timer = setTimeout(() => {
    if (formRef.current) {
      formRef.current.setFieldsValue({
        created_at: defaultTimeRange,
      });
    }
  }, 100);
  
  return () => clearTimeout(timer);
}, []);

三、其他注意事项

如果遇到表单值不更新，尝试使用 formRef.current.resetFields() 重置表单
确保服务端接口能正确处理时间范围参数
对于复杂场景，建议使用 initialValues 配合请求参数