Reactにおけるアロー関数

Question

Reactを勉強しているものです。その中でアロー関数を使ったコードに疑問点があったので、質問させていただきます。

  handleDeleteTodo = (id) => {
    this.setState(({todos}) => ({
      todos: todos.filter(t => t.id !== id)
    }))
  }

このコード内の

  this.setState(({todos}) => ({
    todos: todos.filter(t => t.id !== id)
  }))

1行目右から3行目にかけてのコードがわかりません。通常のアロー関数であれば

 this.setState(({todos}) => {
   todos: todos.filter(t => t.id !== id)
 })

これでいいのではないでしょうか？
何故()でtodos:todos.filter~を囲む必要があるのでしょうか？
現状、自分が考えている3つ目のコードだと「'todos': is defined, but never used」と言われています。

よければ参考になるサイトなども教えていただけると嬉しいです。

Answer 1

何故()でtodos:todos.filter~を囲む必要があるのでしょうか？

アロー関数を => {のように始めると、この中括弧はコードブロックであると解釈されます。しかも、({todos}) => {todos: todos.filter(t => t.id !== id)}と書いた場合も、ブロック内はtodos:というラベルを付けたtodos.filter(t => t.id !== id)という式文を実行する、ということで、全く違う意味で文法的に成立してしまいます。

なので、オブジェクトリテラル1つを返すアロー関数は、 (引数) => ({ key: value })と書く必要があります。

Comments

[tojima]

この式はオブジェクトリテラルを返していたんですね。勉強になります。ありがとうございました。