React应用数据同步：收藏功能渲染值与函数内访问值不匹配解决

你遇到的读取旧状态的问题，是React开发中非常典型的**陈旧闭包（Stale Closure）**问题，背后的运行逻辑是：

• React的状态更新是异步批处理的，执行setFavored(!favored)后，不会立刻修改当前渲染周期内的favored常量值，新的状态只会在组件下一次重渲染时才会生效。
• 事件回调函数是在当前渲染周期生成的，函数内部捕获的是本次渲染时的favored值，所以在调用完状态更新方法后立刻读取favored，拿到的永远是更新前的旧值，和最终UI渲染的状态存在偏差。

把业务逻辑塞到状态更新函数里的写法虽然能临时拿到最新状态，但存在明显缺陷：

• React在开发环境严格模式下，会主动执行两次状态更新函数来检测副作用，写在更新函数内部的addOn/onDelete逻辑会被重复触发，导致接口重复调用、收藏列表数据异常。
• 副作用逻辑和状态更新逻辑强耦合，后续维护时很难定位状态变化的触发源头。

将状态更新逻辑和副作用逻辑解耦，通过useEffect监听状态变化执行后续操作是最稳妥的实现：

1. 星标点击的回调函数只负责更新状态本身，不掺杂业务逻辑，更新时优先使用函数式更新写法，避免前置值异常：

const toggleFavored = () => {
    setFavored(prev => !prev)
}

2. 新增独立的副作用钩子监听favored状态变化，等组件完成重渲染、拿到最新的状态值后，再执行对应的收藏/取消收藏同步逻辑：

useEffect(() => {
    if (favored) {
        console.log(`当前状态：已收藏，触发添加收藏逻辑`)
        addOn(item)
    } else {
        console.log(`当前状态：未收藏，触发取消收藏逻辑`)
        onDelete(item)
    }
// 依赖数组需要补全所有用到的响应式变量，避免新的闭包问题
}, [favored, item, addOn, onDelete])

3. 完整的组件结构调整后，既可以保证UI颜色切换正常，也能在触发后续操作时拿到准确的最新状态值。

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