Next.js循环中子组件更新状态对象缓存不一致问题求助

问题根源 #

你猜的没错，核心问题是闭包陷阱：

• 父组件初始渲染时，update_cache函数里的cachedObjs指向初始的空对象{}；
• 子组件的useEffect依赖空数组[]，只会在挂载时执行一次，此时捕获的是父组件初始版的update_cache；
• 每个子组件调用这个旧版update_cache时，都是基于初始空对象去创建新对象，最后执行的那个子组件会把之前的缓存全部覆盖，只留下自己的键值对。

解决方法（最直接方案） #

把setCachedObjs改成函数式更新，这样每次更新都会基于最新的缓存状态，彻底避开闭包问题：

const update_cache = function(key, obj){
    // 使用函数式更新，prevCached是当前最新的缓存状态
    setCachedObjs(prevCached => ({
        ...prevCached,
        [key]: obj
    }));
}

补充说明 #

函数式更新是React useState的内置特性，当新状态依赖于旧状态时，必须用这种方式——它会自动传入当前最新的状态值，不需要依赖闭包里的变量，完美解决这类闭包导致的状态覆盖问题。

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