如何在React中将Axios REST响应的日期字符串转换为Date类型？

TypeScript的类型声明仅作用于编译阶段，不会自动在运行时完成类型转换，所以必须手动处理API返回的日期字符串，才能让items真正符合ItemsType的类型定义。以下是几种简便的实现方式：

1. 手动字段映射（适合结构简单的场景） #

直接在处理API响应时，遍历原始数据并转换指定日期字段：

type ItemsType = {
  id: number
  locationName: string
  checkinDate: Date
  checkoutDate: Date
}

function App() {
  const [items, setItems] = useState<ItemsType[]>([])
  useEffect(() => {
    (async () => {
      try {
        const res = await axios.get(`https://localhost:7040/Tripstop`)
        const rawItems = res.data;
        // 手动转换日期字段
        const typedItems = rawItems.map((item: any) => ({
          ...item,
          checkinDate: new Date(item.checkinDate),
          checkoutDate: new Date(item.checkoutDate)
        }));
        setItems(typedItems);
      } catch (err) {
        console.error('请求失败:', err);
      }
    })()
  }, [])
}

2. 通用转换函数（适合多类型复用） #

如果多个数据类型都需要转换日期字段，可以封装一个通用函数，避免重复代码：

// 通用日期转换函数
function convertDates<T>(obj: T, dateFields: Array<keyof T>): T {
  const converted = { ...obj };
  dateFields.forEach(field => {
    if (typeof converted[field] === 'string') {
      converted[field] = new Date(converted[field] as unknown as string) as unknown as T[keyof T];
    }
  });
  return converted;
}

// 使用示例
const typedItems = rawItems.map(item => 
  convertDates(item, ['checkinDate', 'checkoutDate'] as const)
);

3. Axios响应拦截器（全局自动处理） #

利用Axios的响应拦截器，全局拦截所有API响应，自动识别并转换日期字符串，无需每个请求手动处理：

// 在Axios初始化时配置拦截器
axios.interceptors.response.use(
  (response) => {
    // 递归遍历响应数据，转换日期字符串
    function convertDates(obj: any): any {
      if (obj instanceof Date) return obj;
      if (typeof obj !== 'object' || obj === null) return obj;
      if (Array.isArray(obj)) return obj.map(convertDates);
      
      const converted = { ...obj };
      for (const key in converted) {
        const value = converted[key];
        // 匹配ISO格式的日期字符串（可根据实际格式调整判断逻辑）
        if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
          converted[key] = new Date(value);
        } else if (typeof value === 'object') {
          converted[key] = convertDates(value);
        }
      }
      return converted;
    }
    
    response.data = convertDates(response.data);
    return response;
  },
  (error) => Promise.reject(error)
);

// 之后请求时无需手动转换，直接赋值即可
const res = await axios.get(`https://localhost:7040/Tripstop`);
setItems(res.data);

类型安全补充 #

为了确保转换后的数据类型正确，可以添加类型守卫进行校验：

function isItemsType(item: any): item is ItemsType {
  return (
    typeof item.id === 'number' &&
    typeof item.locationName === 'string' &&
    item.checkinDate instanceof Date &&
    item.checkoutDate instanceof Date
  );
}

// 使用时校验
const typedItems = rawItems
  .map(item => ({
    ...item,
    checkinDate: new Date(item.checkinDate),
    checkoutDate: new Date(item.checkoutDate)
  }))
  .filter(isItemsType);

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