React/TypeScript项目中如何将API返回的日期转换为指定格式绑定到模板？

有两种处理位置可以选择，根据项目场景适配即可：

• 数据量小、仅单次渲染使用，直接在渲染逻辑里转换即可
• 数据量大、同一日期需要多处复用，建议拿到API返回后先统一预处理再存到状态中

方法1：原生API实现（无需引入第三方依赖） #

用浏览器原生支持的Intl.DateTimeFormat即可实现目标格式，TS原生兼容不需要额外类型处理。

通用格式化工具函数 #

你可以把这个函数单独存到工具文件中全局复用：

const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr);
  return new Intl.DateTimeFormat('en-GB', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  }).format(date);
};

en-GB区域配置刚好会输出22 July 2020这类你需要的格式，不需要手动拼接字符串。

渲染时直接转换的组件代码 #

注意你原代码中map返回的JSX没有根节点，需要用React.Fragment（简写<>）包裹，同时要给遍历项加key属性避免React警告：

const Component = () => {
  // data为你从接口拿到的状态数据
  return (
    <>
      {data.map((inner, index) => (
        <div key={index}>
          <p>{inner.title}</p>
          <p>{formatDate(inner.date)}</p>
        </div>
      ))}
    </>
  );
};

统一预处理数据的示例 #

如果需要减少重复计算，在请求接口获取数据后直接预处理再存到状态中即可：

import { useState, useEffect } from 'react';

const [data, setData] = useState<{title: string, formattedDate: string}[]>([]);

useEffect(() => {
  fetch('/你的接口地址')
    .then(res => res.json())
    .then(rawData => {
      // 批量转换日期
      const processedData = rawData.map(item => ({
        ...item,
        formattedDate: formatDate(item.date)
      }));
      setData(processedData);
    });
}, []);

// 渲染时直接调用预处理好的字段
const Component = () => {
  return (
    <>
      {data.map((inner, index) => (
        <div key={index}>
          <p>{inner.title}</p>
          <p>{inner.formattedDate}</p>
        </div>
      ))}
    </>
  );
};

方法2：第三方日期库实现（可选，适合项目已引入相关依赖的场景） #

如果你的项目已经接入了date-fns这类轻量化日期库，可以直接用内置方法实现，代码更简洁：

import { format } from 'date-fns';
import { enGB } from 'date-fns/locale';

// 转换调用
const formattedDate = format(new Date(inner.date), 'd MMMM yyyy', { locale: enGB });

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