React中如何在map循环内将MongoDB的日期显示为字符串？

先修正你原代码里的两个错误：

• 日期字符串必须用引号包裹，比如 new Date('2005-12-03T18:30:00.000Z')
• toDateString 是方法，必须加括号调用：toDateString()

针对你的map循环，有两种修改方式：

方式1：直接在JSX内处理 #

把标注位置的 {val.date} 替换成 {new Date(val.date).toDateString()} 即可，修改后的完整代码如下：

{ orders.map((val, key)=>{ 
  return <div className='bg-light mx-3 my-2 p-4 rounded-4 border border-info border-4' key={key}> 
    <div className='d-inline-block mx-2'> 
      <span className='fs-5 fw-bold'>{val.orderId}</span> 
    </div> 
    <div className='d-inline-block mx-3'> 
      <span className='fs-5 fw-bold'>{new Date(val.date).toDateString()}</span> {/* 此处已修改 */}
    </div> 
    <div className='d-inline-block mx-4'> 
      <span className='fs-5 fw-bold'>{val.orderType}</span> 
    </div> 
    <button onClick={() => navigate(`/update/${val._id}`)} className="nav-link">Edit</button> 
    <button onClick={() => deleteOrder(val._id)} className="nav-link">Delete</button> 
  </div> 
}) }

这样会把ISO格式日期转成类似 Sat Dec 03 2005 的字符串格式。

方式2：封装工具函数（推荐，方便复用） #

如果需要在多个地方格式化日期，可以先定义一个工具函数：

const formatDate = (isoDate) => {
  if (!isoDate) return '无日期';
  return new Date(isoDate).toDateString();
}

然后在map循环里调用这个函数：

{ orders.map((val, key)=>{ 
  return <div className='bg-light mx-3 my-2 p-4 rounded-4 border border-info border-4' key={key}> 
    <div className='d-inline-block mx-2'> 
      <span className='fs-5 fw-bold'>{val.orderId}</span> 
    </div> 
    <div className='d-inline-block mx-3'> 
      <span className='fs-5 fw-bold'>{formatDate(val.date)}</span> {/* 调用工具函数 */}
    </div> 
    <div className='d-inline-block mx-4'> 
      <span className='fs-5 fw-bold'>{val.orderType}</span> 
    </div> 
    <button onClick={() => navigate(`/update/${val._id}`)} className="nav-link">Edit</button> 
    <button onClick={() => deleteOrder(val._id)} className="nav-link">Delete</button> 
  </div> 
}) }

如果需要更自定义的格式（比如 2005-12-03），可以用如下工具函数手动拼接：

const formatCustomDate = (isoDate) => {
  const date = new Date(isoDate);
  return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

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