React中调用setState传递state时何时使用括号？

DevOps 小满

2026-8-24

React setState箭头函数括号使用说明

这本质是JavaScript箭头函数的语法规则，和React setState本身无关，只是你刚好在setState里用到了箭头函数而已。

两种箭头函数写法的区别

1. 隐式返回（一行代码直接返回值）

箭头函数可以省略大括号，直接写返回值，这叫隐式返回：

// 隐式返回一个数字
const add = (a, b) => a + b;

但如果要隐式返回对象字面量，直接写() => { key: value }会出问题——JS会把{}当成箭头函数的函数体分隔符，而不是对象。所以必须用括号把对象包起来，告诉JS这是要返回的对象：

// 正确：用括号包裹对象，实现隐式返回
const getObj = () => ({ name: 'test' });

对应你第一个setState的例子：

increment() {
    this.setState(state => ({
      count: state.count + 1
    }));
}

这里state => ({ count: ... })就是用括号包裹对象，让箭头函数隐式返回这个对象给setState。如果去掉括号，写成state => { count: state.count +1 }，JS会把{}当成函数体，里面的count: ...会被解析成标签语句，根本不会返回任何东西，setState拿不到更新对象，自然无法正常运行。

2. 显式返回（多行代码，手动return）

当箭头函数里需要写多行逻辑（比如条件判断、循环），必须用{}包裹函数体，这时需要手动用return返回结果：

const getStatus = (num) => {
  if (num > 0) {
    return 'positive';
  } else {
    return 'negative';
  }
}

对应你第二个setState的例子：

toggleVisibility() {
    this.setState(state => {
      if (state.visibility === true) {
         return { visibility: false };
       } else {
         return { visibility: true };
      }
    });
}

这里的{}是箭头函数的函数体，里面有if分支逻辑，所以必须用return手动返回更新对象，不需要外层括号——因为{}已经明确是函数体，不是对象字面量。