React中如何从AG Grid行数据中获取并格式化日期？

问题描述 #

• 尝试格式化Activity数据数组中的dateTime字段，已确认表格数据非空且能在其他表格库正常展示
• 活动列表页面崩溃，提示找不到数据中定义的日期，推测是列定义时valueGetter()的数据类型处理错误，找到的文档和教程均为JavaScript版本，无法解决问题

ActivityModel接口定义 #

export interface ActivityModel extends obj {
  id: string
  key: string
  title: string
  description: string
  dateTime: Timestamp
  duration: number
  notes: string
  type: string
  activity: string
  completed: boolean
  material: string
  size: string
  assignedTo: string
  value: string
  unit: string
  editable: boolean
}

现有Activities页面代码 #

const [columnDefs] = useState([
        { field: "title", headerName: "Title", filter: "agTextColumnFilter" },
        {
          field: "description",
          headerName: "Description",
          flex: 3,
          filter: "agTextColumnFilter",
        },
        {
          field: "startDate",
          headerName: "Start Date",
          flex: 2,
          filter: "agDateColumnFilter",
          valueGetter: (p: ActivityModel) => {
            return formatDate(p.dateTime.toDate())
          },
        },
        {
          field: "completed",
          headerName: "Completed",
          filter: "agTextColumnFilter",
        },
      ])

    <div className="ag-theme-alpine" style={{ height: 400, width: 1200 }}>
      <AgGridReact
        defaultColDef={defaultColDef}
        rowData={activities}
        columnDefs={columnDefs}
        onGridReady={pullActivities}
      ></AgGridReact>
    </div>

解决方案 #

1. 修正valueGetter的参数类型 #

AgGrid的valueGetter接收的是ValueGetterParams类型参数，而非直接的ActivityModel，需要从params.data中获取当前行数据，同时必须做空值判断，避免异步加载时数据未就绪导致的报错：

valueGetter: (params) => {
  // 断言并获取当前行的Activity数据
  const activity = params.data as ActivityModel;
  // 空值保护，避免dateTime不存在时调用toDate()报错
  if (!activity?.dateTime) return '';
  return formatDate(activity.dateTime.toDate());
}

2. 适配agDateColumnFilter的要求 #

agDateColumnFilter要求过滤值为Date类型或可被解析的标准日期字符串，如果formatDate返回的是非标准格式字符串，会导致过滤器失效或页面异常。建议将valueGetter返回原始Date对象，用valueFormatter专门处理显示格式化：

{
  field: "startDate",
  headerName: "Start Date",
  flex: 2,
  filter: "agDateColumnFilter",
  // 返回Date对象供过滤器使用
  valueGetter: (params) => {
    const activity = params.data as ActivityModel;
    return activity?.dateTime?.toDate() || null;
  },
  // 专门处理前端显示的格式化
  valueFormatter: (params) => {
    return params.value ? formatDate(params.value) : '';
  }
}

3. 异步数据加载的额外处理 #

由于onGridReady触发pullActivities是异步操作，初始渲染时activities可能为空数组，建议在AgGrid组件上添加空值兜底，避免传递undefined：

<AgGridReact
  defaultColDef={defaultColDef}
  // 空数组兜底，避免传递undefined
  rowData={activities || []}
  columnDefs={columnDefs}
  onGridReady={pullActivities}
></AgGridReact>

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