React函数组件中对象状态动态属性的合并更新问题

你的问题出在updateObj函数计算新值时，用的是闭包捕获的旧obj，而非状态更新时的最新prevState。连续调用updateObj时，两次更新都基于同一个初始状态计算，导致后一次覆盖前一次的修改。

修正方法很直接，把属性值的计算逻辑移到setObj的回调函数里，依赖prevState来计算新值，这样每次更新都会基于上一次的最新状态：

let newObj = {
    a: 1,
    b: 2,
    c: 3,
}

let [obj, setObj] = React.useState(newObj)

function updateObj(keys, values) {
    setObj(prevState => {
        const updatedValues = {};
        keys.forEach((key, index) => {
            // 用prevState获取当前最新的属性值，而非闭包里的旧obj
            updatedValues[key] = prevState[key] + values[index];
        });
        return {...prevState, ...updatedValues};
    });
}

function changeState() {
    updateObj(['a', 'c'], [1, 1])//给a和c各加1
    updateObj(['a', 'b', 'c'], [-1, 1, -1])//给a减1，b加1，c减1
    // 现在最终会得到 {a: 1, b: 3, c: 3}
}

React.useEffect(() => {console.log(obj)}, [obj])

return (
    <someComponent onMouseDown={()=>changeState()}/>//此处更新状态
)

关键说明： #

• React的setState是异步批量更新的，同一个事件循环里的多次setState会被合并处理。
• 当需要基于前一次状态计算新状态时，必须使用函数式更新（给setObj传回调函数），确保每次拿到的prevState都是最新的状态值，避免闭包导致的旧值问题。

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