Reactを使ったTodoListで時間を表示させる方法

Question

前提・実現したいこと

Ethereumを使ったTodo Listを作成していて、Todoを作成した時間を表示したいです。

発生している問題・エラーメッセージ

該当のソースコード

下記のコードでブロックチェーンから、contentとtimeを含むtaskを取り出し、
そのtaskの配列をstateにセットしています。

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]
  })
}

tasksの配列を表示するためにmapを使って繰り返し処理を行なっています。

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

その結果、数字の羅列になりました

1555650125
1555651118
1555651169
1555664902

試したこと

ですので{task.time}を{Date(checkin.checkintime)}に変えたところ時間が全て同じになりました。

Sat Apr 20 2019 09:20:57 GMT+0900 (日本標準時)
Sat Apr 20 2019 09:20:57 GMT+0900 (日本標準時)
Sat Apr 20 2019 09:20:57 GMT+0900 (日本標準時)
Sat Apr 20 2019 09:20:57 GMT+0900 (日本標準時)

だた、最初のtaskをセットするところで下記のコードにすると、consoleできちんと表示されていました。

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

Fri Apr 19 2019 14:02:05 GMT+0900 (日本標準時)
Fri Apr 19 2019 14:18:38 GMT+0900 (日本標準時)
Fri Apr 19 2019 14:19:29 GMT+0900 (日本標準時)
Fri Apr 19 2019 18:08:22 GMT+0900 (日本標準時)
Fri Apr 19 2019 18:20:15 GMT+0900 (日本標準時)

TodoListで時間を表示するために何かアドバイスいただけないでしょうか？
よろしくお願いいたします。

Answer 1

下記のように変更すればうまくいきました。

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

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