React useEffect依赖变更未执行，sessionStorage持久化失败求助

看起来你遇到了两个关联的问题，咱们一步步拆解解决：

问题1：joinedLobby状态更新时，写入sessionStorage的useEffect未触发 #

先聚焦Provider里的这段代码：

const [joinedLobby, setJoinedLobby] = useState(undefined);
useEffect(() => {
  if (joinedLobby === undefined) return;
  sessionStorage.setItem('joinedLobby', JSON.stringify(joinedLobby));
}, [joinedLobby]);

排查方向和解决办法：

• 确认setJoinedLobby真的更新了状态：
  在调用setJoinedLobby(joinState.result)之后加个console.log(joinState.result)，或者打开React DevTools查看joinedLobby状态是否真的从undefined变成了目标对象。如果状态没变化，那useEffect自然不会触发。
• 检查Provider的作用范围：
  你的路由嵌套在Provider内部，理论上<Play />组件调用setJoinedLobby能同步更新Provider状态，但如果Provider所在的组件在路由切换时重新渲染（比如Provider写在某个路由组件里），可能会重置joinedLobby状态。建议把Provider放在路由的最外层，确保所有路由组件都能共享同一个状态实例：

  <JoinedLobbyProviderContext.Provider value={{ getJoinedLobby, setJoinedLobby }}>
    <Router>
      <Route path='/play'>
        <Play />
      </Route>
      <Route path='/lobby'>
        <Lobby />
      </Route>
    </Router>
  </JoinedLobbyProviderContext.Provider>
  

• 强制状态引用更新：
  如果joinState.result是同一个对象引用（比如后端返回的对象没有重新创建），useState可能不会触发重渲染。可以在设置状态时解构对象生成新引用：setJoinedLobby({...joinState.result})，确保状态变化能被检测到。

问题2：后端获取数据导致应用崩溃，静态数据正常 #

你怀疑问题出在const jsonResponse处，大概率是后端响应不符合预期，常见两种情况：

情况1：后端返回非合法JSON，导致.json()抛出错误 #

fetch的.json()方法要求响应体是合法JSON字符串，如果后端返回HTML错误页、空内容或格式错误的JSON，调用.json()会抛出异常。你可以拆分代码，先检查响应状态再解析：

const joinLobby = async () => {
  joinStateDispatch({ type: 'loadingTrue' });
  try {
    const response = await fetch(`${BACKEND_URL}/play/joinLobby/${joinState.id}`, {
      method: 'PATCH', credentials: 'include',
      headers: { 'Content-type': 'application/json', },
      body: JSON.stringify({ password: passRef.current.value, }),
    });
    // 先检查响应状态码，非2xx的情况单独处理
    if (!response.ok) {
      const errorMsg = await response.text();
      throw new Error(`请求失败：${response.status} - ${errorMsg}`);
    }
    const jsonResponse = await response.json();
    joinStateDispatch({ type: 'setResult', payload: jsonResponse });
  } catch (e) {
    joinStateDispatch({ type: 'setErrors', payload: e.message });
  }
};

情况2：jsonResponse结构与预期不符 #

静态数据符合你预期的{success: "...", payload: {...}}结构，但后端返回的数据可能缺少payload、id等字段，导致后续组件使用状态时因访问不存在的属性崩溃。可以在设置状态前做结构校验：

// 在调用joinStateDispatch之前
if (jsonResponse?.success && jsonResponse?.payload?.id) {
  joinStateDispatch({ type: 'setResult', payload: jsonResponse });
} else {
  joinStateDispatch({ type: 'setErrors', payload: new Error('后端返回数据结构异常') });
}

额外优化：初始化时从sessionStorage恢复状态 #

既然要做持久化，Provider初始化时直接从sessionStorage读取数据，避免页面刷新后状态丢失：

const [joinedLobby, setJoinedLobby] = useState(() => {
  const storedData = sessionStorage.getItem('joinedLobby');
  return storedData ? JSON.parse(storedData) : undefined;
});

最后建议用React DevTools跟踪joinState.result和joinedLobby的状态变化，能帮你快速定位状态更新的节点是否符合预期。

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