Question

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

我得到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

您能建议我在地图上显示时间吗？

Answer 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对象。

Answer 2

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

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

2 个答案: