谷歌登录API调用后如何更新Navbar？React Hook相关问题咨询

你代码的核心问题是将session变更后的状态更新逻辑写在了useEffect的清理函数位置：useEffect的返回值是仅当组件卸载、或者依赖项更新前才会触发的回调函数，因此正常session更新时你的更新逻辑根本不会执行，只有触发组件重渲染/卸载的场景（比如切窗口触发的页面聚焦重渲染）才会触发之前遗留的清理函数执行，这就是切回浏览器才生效的原因。

基础修正（保留原有状态定义） #

直接把状态更新逻辑移出返回值，放到useEffect的主执行体即可：

const { data: session } = useSession(); //next-auth login sessions
const [visitorType, setVisitorType] = useState('viewer')
const visitorRef = useRef(visitorType);

useEffect(()=>{
  // 依赖session变化时直接执行更新，不要放到return里
  if (session) {
    visitorRef.current='buyside';
    setVisitorType('buyside')
  }
},[session])

优化方案（减少冗余状态） #

如果visitorType的值完全由session是否存在决定，不需要单独维护state和ref，直接派生即可，代码更简洁也不会出现同步问题：

const { data: session } = useSession();
// 直接从session派生visitorType，不需要额外状态
const visitorType = session ? 'buyside' : 'viewer';

• useRef本身更新不会触发组件重渲染，你原有逻辑里已经调用setVisitorType触发重渲染，如果你没有其他地方需要用到这个ref存储的值，可以直接删掉ref的定义减少冗余。
• useEffect本身的异步执行不会导致这种切窗口才生效的问题，你的问题完全是逻辑位置写反导致的。

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