时间戳

首页 > 解决方案 > What is the difference between "(.....);" and "{......}" in react?

javascript - What is the difference between "(.....);" and "{......}" in react?

问题描述

I am getting error shown in image for the below code:

handlechange(event) {
    this.setState (prevState => {
      return(
      checked : !prevState.checked
    );});
}

But when I changes round brackets after "return" into curly, it runs fine. I mean what's happening under the hood? What causes the error to go away?

handlechange(event) {
    this.setState (prevState => {
      return{
      checked : !prevState.checked
    }});
}

1

标签： javascriptreactjsobjectecmascript-6

解决方案

这不是 React 的事情。您的第一个示例只是无效的 JavaScript 语法。¹您的第二个示例是有效语法，返回通过对象初始化程序创建的对象（通常称为对象“文字” {checked: !prevState.checked}）。

¹()后return包装一个表达式，然后在您拥有的表达式中，checked: !prevState.checked它看起来像一个带标签的语句。但是您不能将带标签的语句放在需要表达式的位置。

旁注：另一种编写方法是在参数列表中使用属性解构并在对象初始化程序中使用速记属性：

handlechange(event) {
    this.setState(({checked}) => {
      checked = !checked;
      return {checked};
    });
}

推荐阅读