reactのsetStateの書き方について

Question

Reactを勉強しています。
setStateの書き方でアロー関数を用いて書いています。
下記コードが正しいコードです。

this.setState((prevState) => ({
    isDone: !prevState.isDone
}));

ここで1点疑問に思ったのがアロー関数を使った場合{}の前の()っていらないのではないかと思いました。
下記コードで良いのではないかと思いましたが、正しくないようです。

this.setState((prevState) => {
    isDone: !prevState.isDone
});

大変初歩的な質問かもしれませんが、{}の前の()の意味を教えていただきたいです。

Answer 1

アロー関数の説明を読めば一発
object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
の部分を読んでみましょう

Answer 2

これが罠でこのカッコがないとどうなるかというと

const foo = () => {
  ...
}

と書いてあるのと同じになります。で、... に書くのは文です。一方

const foo = () => (...)

と書いた場合 ... に書かれるのは式です。違いがわかりますでしょうか。式はそれ単体で評価すると値が返ってきます。例えば 1 + 2 とかですね。一方文は何も返ってこないやつです。if 文とかそうですし、1 + 2; みたいにセミコロンつけちゃうと文に変化します。

さて挙げられている例ですが

this.setState((prevState) => {
    isDone: !prevState.isDone
});

となっていて中には文を書かなければいけません。isDone: !prevState.isDone ……これは式としても文としておかしいですね？つまりエラーになってしまいます！アロー関数のややこしい仕様の一つです。

追記

maisumakun さんの指摘です。ありがとうございます！ラベル付き文の存在を忘れていました。
label - JavaScript | MDN
なので isDone: !prevState.isDone は文として機能してしまいます。そこが余計厄介と言えるでしょう。アロー関数で連想配列を返すときには兎にも角にも注意が必要です！

Comments

[maisumakun]

＞ isDone: !prevState.isDone ……これは式としても文としておかしいですね？

いえ、「ラベル付きの文」として成立はしてしまいます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/label

意図通りにならない上に、文法上は通ってしまうので余計に厄介です。

[A_kirisaki]

ああー！そんなものがありましたねそう言えば！追記しておきます！