React中使用this.setState必须传入箭头函数吗？

你的代码不生效和this指向、作用域没有关系，纯粹是普通函数返回对象的语法写错了：

• 你写的isToggleOn : !prevState.isToggleOn;在普通函数的大括号包裹的语句块里，会被JS引擎识别为语句标签（就是给循环/代码块打标记供break/continue调用的语法），完全不会被解析成对象键值对，函数实际没有返回任何有效状态。
• 你后续加return仍然不生效，是因为没有给返回的对象补充正确的包裹语法，直接写return isToggleOn: !prevState.isToggleOn属于非法JS语法，代码会直接抛出解析错误，无法正常执行。

正确的普通函数写法 #

两种写法都可以正常实现状态切换：

1. return 后用小括号包裹要返回的状态对象：

this.setState(
  function(prevState) {
    return ({ isToggleOn: !prevState.isToggleOn });
  }
);

2. 先构造状态对象再返回，不需要额外加小括号：

this.setState(
  function(prevState) {
    const nextState = { isToggleOn: !prevState.isToggleOn };
    return nextState;
  }
);

补充说明 #

官方示例里箭头函数写法外层包的小括号，和你写普通函数时需要注意的语法点是同一个逻辑：

不管是箭头函数还是普通函数，只要函数体用大括号包裹，JS引擎就会默认把大括号内的内容识别为顺序执行的语句块，而不是要返回的对象值。箭头函数省略return的简写语法下，必须用小括号把对象包裹成单独的表达式，才能让引擎正确识别这是返回值，也就是示例里prevState => ({...})写法的由来。

另外要澄清一个常见误区：传给this.setState的状态更新函数，React内部调用时会自动处理执行上下文，不管你传箭头函数还是普通函数，都不会因为this指向问题导致状态更新失败。

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