React中使用自增操作更新state变量报错，求排查（附计数器示例）

错误原因 #

1. 直接修改只读状态值：counter是useState返回的状态变量，属于React的不可变状态，不能直接通过counter++或counter--修改，这会触发"Assignment to constant variable"的报错（和你截图中的错误一致）。
2. 后置自增/自减的逻辑问题：就算能修改，counter++会先返回当前counter值再自增，调用setCounter(counter++)相当于把当前值再次设置给状态，不会触发实际的数值变化。

修复方案 #

使用函数式更新来获取最新的状态值，同时避免直接修改状态变量：

import React from "react";
import { useState } from "react";

export default function Ex2() {
    const [counter, setCounter ] = useState(0);

    const increaseValue = () => {
        // 函数式更新，prevCounter是最新的状态值
        setCounter(prevCounter => prevCounter + 1);
    }

    const decreaseValue = () => {
        setCounter(prevCounter => prevCounter - 1);
    }

    return (
        <div className="ex2">
            <p>{counter}</p>
            <p>
                <button onClick={increaseValue}>increase</button>
                <button onClick={decreaseValue}>Decrease</button>
            </p>
        </div>
    )
}

补充说明 #

函数式更新的优势在于，当状态更新依赖于前一次状态的最新值时，能确保拿到的是最新的状态，避免因React异步更新机制导致的闭包陷阱，同时完全遵循React状态不可变的原则。

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