为什么React的setState类状态更新函数需通过额外函数调用，直接调用会报错？

结论 #

你遇到的报错和「React不允许直接修改状态」的设计理念无关，也和不能直接写count++的原因完全不一致。

报错的根本原因

你第二段代码的问题是将状态更新函数setGoingOut直接放在了组件函数的顶层执行，触发了无限重渲染死循环：

• React函数组件的运行逻辑是：每次状态更新都会重新执行整个组件函数，生成最新的JSX渲染结果
• 首次执行App组件时，顶层的setGoingOut被调用，触发状态更新，进而触发组件重渲染
• 重渲染过程中又会执行顶层的setGoingOut，再次触发状态更新，由此进入无限循环
• React内置的防护机制检测到无限重渲染后就会抛出错误，避免页面完全卡死。

另外你的代码还存在一个隐藏逻辑问题：你直接把setGoingOut绑定给了onClick事件，事件触发时会默认把事件对象作为参数传递给setGoingOut，此时你用函数式更新拿到的prevValue会变成事件对象而非之前的布尔状态，即使没有死循环，逻辑也会出错。

和「禁止直接修改状态」规则的差异

我们平时要求不能直接写count++修改状态，本质是违反了React状态不可变的设计原则：useState返回的状态变量是只读的，直接修改它不会触发组件重渲染，也会导致React内部的状态快照出现不一致。
而你遇到的场景是合法调用了状态更新函数，但调用时机完全错误，和状态可变不可变的约束没有任何关系。

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