Ag Grid表格中日期值无法显示的问题求助

1. 修正无效的数据处理逻辑 #

你当前的map操作仅遍历数据取出startDate，但未修改原数据或生成新数组赋值给tableData，这一步完全无效。如果接口返回的startDate格式需要转换（比如时间戳转日期字符串），需修改数据后再设置状态：

const getData = () => {
  axios.get(apiUrl).then(res => {
    // 处理日期格式，根据接口返回的实际格式调整
    const processedData = res?.data.map(item => ({
      ...item,
      // 示例：将时间戳转为YYYY-MM-DD格式
      startDate: new Date(item.startDate).toLocaleDateString()
      // 若为ISO字符串，可直接截取日期部分：startDate: item.startDate.split('T')[0]
    }));
    setTableData(processedData);
  }).catch(error => {
    console.warn(error, 'api-error');
  });
};

2. 检查columnDefs列配置 #

确保columnDefs中正确指定日期列的字段名，还可通过valueFormatter统一格式化日期：

const columnDefs = [
  // 其他列配置
  {
    headerName: '开始日期',
    field: 'startDate', // 必须与数据中的字段名完全一致（区分大小写）
    // 可选：添加格式化规则统一展示样式
    valueFormatter: params => {
      if (!params.value) return '';
      return new Date(params.value).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    }
  }
];

3. 验证接口返回的数据结构 #

在回调中打印接口返回数据，确认每个对象确实包含startDate字段且拼写正确：

axios.get(apiUrl).then(res => {
  console.log('接口返回数据:', res.data); // 检查每个item的startDate是否存在
  // ...后续处理逻辑
})

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