为什么我需要为React .setState（）添加一组额外的括号？

Question

我正在浏览React网站的“快速入门”部分，它使用的代码如下所示：

toggleClicked() {
    this.setState(prev => ({
        isOn: !prev.isOn
    }));
}

为什么我需要功能块周围的额外括号？我认为它看起来像这样：

toggleClicked() {
    this.setState(prev => {
        isOn: !prev.isOn
    });
}

但这不起作用。这些括号是什么意思？

Answer 1

解释器认为{之后的=>是函数块的开头而不是对象 - 所以，将它包装在括号中以清楚表明你在那里返回一个对象而不是定义一个函数。

this.setState(prev => ({
    isOn: !prev.isOn
}));

Answer 2

isOn: !prev.isOn周围的大括号是对象文字符号。

紧邻其周围的括号必须指示上述大括号代表对象文字而不是函数体。这种区别是必要的，因为右箭头＆＃34;胖箭头＆＃34; （=>）可以是正确的函数体（由大括号包围）或表达式（隐式return）。在后一种情况下，该表达式可能是一个对象文字，这对于解析器来说会让人感到困惑（我确信TC 39委员会研究语言语法并得出它的结论。解析器无法在没有明确括号的帮助下区分这两个用例。）

下一个外括号是传递给setState的参数的分隔符。

最外面的大括号是toggleClicked函数体的分隔符。