React 渲染 Epoch 时间戳转换为 am pm答案

【问题标题】：React render Epoch timestamp convert to am pmReact 渲染 Epoch 时间戳转换为 am pm
【发布时间】：2022-01-03 14:02:38
【问题描述】：

我正在做一个个人React.js 项目。我正在获取一个 API，其中一个值是 Epoch timestamp。我想将它呈现为像上午/下午这样的人类可读时间。 Epoch 时间戳在map 之后呈现。下面你可以看到代码：

{value.map((dog, c) => (
                  <div key={c}>
                    <div><b>Race name:</b> {dog.Venue}</div>
                    <div><b>Start time:</b> {dog.AdvertisedStartTime}</div>

{dog.AdvertisedStartTime} 呈现如下数字：1641079080000。这个数字是未来的某个时间，例如下午 1:30

【问题讨论】：

标签： javascript reactjs timestamp epoch

【解决方案1】：

你可以做这样的事情。首先定义一个辅助函数将Epoch 转换为所需的语言环境并在地图中使用它。函数可以是

function convertEpoch(value) {
  if (!value) {
    return ''
  }
  const time = new Date(Number(value));
  if (isNaN(time.valueOf())) {
    return '';
  }
  return time.toLocaleString("en-US", { hour: "numeric", minute: "numeric", hour12: true });
}

并在你的map 中使用它

{value.map((dog, c) => (
              <div key={c}>
                <div><b>Race name:</b> {dog.Venue}</div>
                <div><b>Start time:</b> {convertEpoch(dog.AdvertisedStartTime)}</div>

【讨论】：

感谢 Vishnu，但它会呈现一个空字符串。这是一个代码框供您查看整个代码。 codesandbox.io/s/frosty-cherry-2733x?file=/src/components/…
你能把你从api得到的json数据给我吗？
还将convertEpoch 函数放在const ItemDetails 之外以获得良好实践，为什么要在循环中一次又一次地创建函数
codesandbox 中有一个文件夹名称“data”，其中包含来自 API 的所有模拟数据。此外，例如其中一项具有以下内容： AdvertisedStartTime: "/Date(1641069600000)/",
您传递给函数的值是一个字符串，如果您尝试转换为DateTime，字符串将返回Invalid Value，您需要先将其转换为您的转换函数中的const epoch = Number(value)之类的数字.检查if (!value) 条件后执行此操作

【解决方案2】：

let yourTimestamp = 1641079080000, (any number)
date = new Date(yourTimestamp * 1000),
dateVal = [
  date.getFullYear(),
  date.getMonth()+1,
  date.getDate(),
  date.getHours(),
  date.getMinutes(),
  date.getSeconds(),
];
console.log(dateVal);

请注意：小时 - 分钟和秒取决于您的操作系统的时区。在不同的时区，它可以是任何东西。因此，您可以将时区偏移添加到时间以创建 GMT 日期：

let myDate = new Date();
date = new Date(timestamp*1000 + myDate.getTimezoneOffset() * 60000)

【讨论】：

谢谢阿明。但是，当我像在我的代码中那样动态地渲染 Epoch 时间戳时，我是如何使用该函数的。

【解决方案3】：

这是一个例子，我们可以很容易地获得时间。

let today= new Date().toLocaleTimeString(); console.log(今天);

所以你可以试试这个：

{value.map((dog, c) => (
          <div key={c}>
            <div><b>Race name:</b> {dog.Venue}</div>
            <div><b>Start time:</b> {convertEpoch(dog.AdvertisedStartTime.toLocaleTimeString();)}</div>

【讨论】：

你能分享我的 API 链接吗？解决这个问题

【解决方案4】：

这是一个例子，我们可以很容易地获得时间。

let today= new Date().toLocaleTimeString(); console.log（今天）；所以你可以试试这个：

{value.map((dog, c) => (
          <div key={c}>
          {convertEpoch(dog.AdvertisedStartTime.toLocaleTimeString();)}</div>

【讨论】：

感谢 Shahrukh，但它破坏了整个代码