React使用++前缀更新state变量触发错误的原因探究

我是React和JavaScript新手，正在探索语言细节。尝试对比使用++运算符与counter + 1的方式更新state变量counter，前者点击按钮后触发错误：Uncaught TypeError: Assignment to constant variable，后者无报错，想了解该现象的原因。

代码示例 #

function App() {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(++counter);
  };

  console.log(counter);

  return (
    <>
      <button onClick={incrementCounter}>Increase </button>
    </>
  )
}

报错信息 #

App.jsx?t=1714542208954:31 Uncaught TypeError: Assignment to constant variable.
    at incrementCounter (App.jsx?t=1714542208954:31:18)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=38cf15c3:3672:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=38cf15c3:3697:24)
    at invokeGuardedCallback (react-dom_client.js?v=38cf15c3:3731:39)
    at invokeGuardedCallbackAndCatchFirstError (react-dom_client.js?v=38cf15c3:3734:33)
    at executeDispatch (react-dom_client.js?v=38cf15c3:7014:11)
    at processDispatchQueueItemsInOrder (react-dom_client.js?v=38cf15c3:7034:15)
    at processDispatchQueue (react-dom_client.js?v=38cf15c3:7043:13)
    at dispatchEventsForPlugins (react-dom_client.js?v=38cf15c3:7051:11)
    at react-dom_client.js?v=38cf15c3:7175:20

原因解释 #

• ++counter的本质：++是自增运算符，它会直接修改变量本身的值——先把counter的值加1，再返回新值。但你用const声明了counter，const定义的变量是只读的，不能被重新赋值，所以直接修改counter就触发了「给常量赋值」的错误。
• counter + 1的区别：这个表达式不会修改原变量counter，而是计算出一个新的数值（原counter值加1），然后把这个新值传给setCounter。它只是读取counter的值进行计算，没有尝试修改原变量，所以不会触发错误。

额外补充：React的state本身是不可直接修改的，就算你用let声明counter，直接用++counter也不符合React的state更新规范——必须通过setCounter传递新值来触发组件重新渲染，直接修改state变量不会让React感知到变化，组件也不会更新。

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