React JS中如何高效创建Date对象转换ISO时间戳格式？

你遇到的报错是语法书写错误导致：Date.parse({comment.date}) 中额外包裹的{}会把comment.date封装成对象传入，而Date.parse只接受字符串类型的日期参数，因此触发类型错误。
另外你对JSX书写规则存在误解：map的回调函数中可以在返回JSX之前声明变量、执行任意逻辑，不需要只能直接返回JSX结构。

方案1：原生JS实现（无需额外依赖） #

直接在map回调中处理日期格式化即可，示例代码如下：

renderComments(comments){        
    const listcomments = comments.map((comment) => {
        // 此处可直接处理日期逻辑
        const dateObj = new Date(comment.date);
        // 格式化成本地可读格式，可自定义参数调整输出规则
        const formattedDate = dateObj.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
        return (
            <li key={comment.id}>
                <div className="row">
                    {comment.comment}
                </div>
                <div className="row">
                    -- {comment.author} , {formattedDate}
                </div>
            </li>
        );
    });
    return(
        <ul className = "list-unstyled">
            {listcomments}
        </ul>
    );
}

如果只需要展示年月日，删掉hour、minute配置项即可，默认输出格式示例为2014-09-05 17:57。

方案2：封装通用工具函数（复用性更高） #

如果多个组件需要用到日期格式化能力，可以单独封装可复用的工具函数：

// 可放在公共utils文件中全局调用
function formatDate(dateStr) {
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  // 可自定义输出格式，比如修改为`${year}/${month}/${day}`就是斜杠分隔格式
  return `${year}-${month}-${day} ${hour}:${minute}`;
}

组件中直接调用函数即可：

<div className="row">
    -- {comment.author} , {formatDate(comment.date)}
</div>

方案3：使用日期库（适合复杂格式化需求） #

如果项目中已经引入dayjs、date-fns等轻量日期库，可以直接调用库方法实现更灵活的格式化：

// dayjs 调用示例
import dayjs from 'dayjs';

// 组件内直接调用
<div className="row">
    -- {comment.author} , {dayjs(comment.date).format('YYYY-MM-DD HH:mm')}
</div>

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