为何React.setState()需要额外添加一组括号？

嗨，你踩的这个坑其实是箭头函数语法里的一个小陷阱，我来给你掰扯明白为什么这两组括号必不可少：

首先得搞清楚箭头函数的两种写法逻辑：

• 如果箭头函数的函数体是单行表达式，你可以直接写表达式、不用加大括号，这时候表达式的结果会被隐式返回。比如：

  const double = num => num * 2; // 隐式返回 num*2 的计算结果
  

• 但如果你给函数体加了大括号{}，JavaScript就会把它当成显式函数体，这时候必须用return语句才能返回值，否则函数默认返回undefined。

现在看你的错误写法：

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

这里的大括号{}会被JS解析成箭头函数的函数体，而不是对象字面量！更坑的是，里面的isOn: !prev.isOn会被当成一个标签语句（用来给代码块打标记的语法），而不是对象的键值对。所以这个箭头函数其实没有返回任何有效内容（返回undefined），setState拿到undefined自然无法更新状态，代码就跑不起来了。

那正确写法里的括号()是干嘛的？

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

这组括号是在告诉JavaScript：“别把里面的大括号当成函数体，这是一个对象字面量！” 这样箭头函数就会把这个对象隐式返回给setState，setState就能正确拿到新的状态对象来更新组件了。

当然，你也可以用显式返回的写法，效果完全一样，只是代码稍微长一点：

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

总结一下：箭头函数要隐式返回对象的时候，必须把对象用括号包起来，否则JS会把对象的大括号当成函数体的分隔符，导致解析错误。

内容的提问来源于stack exchange，提问作者JakAttk123