如何使用react显示创建任务的时间答案

【问题标题】：How to show the time when task was created by using react如何使用react显示创建任务的时间
【发布时间】：2019-04-21 00:24:01
【问题描述】：

我想显示使用以太坊在我的待办事项应用中创建任务的时间。

我得到task，其中包括content 和time，并在此代码中按状态设置任务。

constructor(props) {
    super(props)
    this.state = {
    tasks: [],
  }
}
・・・
for (var k = 1; k <= taskCount; k++) {
  const task = await todoList.methods.tasks(k).call()
  this.setState({
    tasks: [...this.state.tasks, task]
  })
}

然后，我使用map 来显示tasks 数组和time。

{ this.props.tasks.map((task, key) => {
  return(
    <div key={key}>
      <p>{task.content}</p>    
      <p>{task.time}</p>
    </div>
  )
})}

结果，我得到了这样的数字

所以，我将{task.time} 更改为{Date(checkin.checkintime)}，以便将该数字转换为正常时间。但是，结果只显示数字。

Sat Apr 20 2019 09:20:57 
Sat Apr 20 2019 09:20:57 
Sat Apr 20 2019 09:20:57 
Sat Apr 20 2019 09:20:57

我编写这段代码是为了检查Data() 是否正常工作，然后我可以得到正确的答案。

for (var k = 1; k <= taskCount; k++) {
  const task = await todoList.methods.tasks(k).call()
  const tasktime = new Date(task.checkintime * 1000)
  console.log(tasktime)

  this.setState({
    tasks: [...this.state.tasks, task]
  })
}

Fri Apr 19 2019 14:02:05 
Fri Apr 19 2019 14:18:38 
Fri Apr 19 2019 14:19:29 
Fri Apr 19 2019 18:08:22

您能给我一些建议，让我在地图上显示时间吗？

【问题讨论】：

标签： reactjs ethereum solidity

【解决方案1】：

在本节中，我假设task 是刚刚创建的新任务。您可以使用时间字符串更新 task.checkintime 属性：

const task = await todoList.methods.tasks(k).call()
task.checkintime = new Date(task.checkintime * 1000).toDateString();

this.setState({
    tasks: [...this.state.tasks, task]
})

这意味着它可以在您的地图中访问：

{ this.props.tasks.map((task, key) => {
return(
  <div key={key}>
    <p>{task.content}</p>    
    <p>{task.checkintime}</p>
  </div>
)

这将采用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString 并在task.checkintime 上分配您的日期的字符串表示形式。

如果您想进行不同的格式化，请查看How to format a JavaScript date，以便您可以格式化您的 Date 对象。

【讨论】：

感谢您的回答。当我尝试时，出现此错误“Objects are not valid as a React child (found: Sun Apr 21 2019 21:08:53. 如果您打算渲染一组子项，请改用数组。”
抱歉，这是因为我们刚刚将一个 Date 对象分配给了task.checkintime。我更新了我的答案，将 Date 对象转换为字符串表示形式，其中包含一些指向不同格式的链接。
非常感谢。还有一个问题。我只有Apr 21 2019，但我也想显示hour 和minute。你有什么主意吗？我找不到怎么做。
您可以将.toDateString() 替换为.toLocaleString()，这有更多可用选项，在此处列出developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。在这个stackoverflow.com/questions/3552461/… 中阅读它。
没问题！如果你能接受我的回答那就太好了，谢谢:)

【解决方案2】：

task.time 是由UNIX time epoch 系统定义的时间。从此您可以转换为任何格式。不确定你想展示什么，但new Date(task.time) 似乎是朝着正确方向迈出的一步。不够的可以参考Date reference或Moment.js。

【讨论】：