React Context跨路由传值异常：/play路由无法获取clickedSituation

1. 修复Context Provider的value传递错误 #

你的SituationProvider中，value属性使用了逗号表达式，这会导致实际传递给Context的只有最后一个值markSituationComplete，clickedSituation并未正确传入。需要将值包装成对象：

修改SituationProvider的返回部分：

return (
  <SituationContext.Provider value={{ clickedSituation, markSituationComplete }}>
    {children}
  </SituationContext.Provider>
)

2. 确保组件正确消费Context #

在Play组件中，通过useContext正确获取Context值：

import { useContext } from 'react';
import { SituationContext } from './path-to-your-context-file';

function Play() {
  const { clickedSituation } = useContext(SituationContext);
  
  // 现在可正常访问状态值
  console.log(clickedSituation);
  
  return (
    // 组件内容
  );
}

3. 可选：处理路由刷新导致的状态丢失 #

如果管理员点击场景后通过页面跳转（刷新页面）进入/mockrbi/play，React Context的状态会因应用重置而丢失，可通过localStorage持久化状态：

• 设置状态时同步存储：

  const markSituationComplete = (situation) => {
    setClickedSituation(situation);
    localStorage.setItem('clickedSituation', JSON.stringify(situation));
  }
  

• 初始化状态时从本地存储读取：

  const [clickedSituation, setClickedSituation] = useState(() => {
    const saved = localStorage.getItem('clickedSituation');
    return saved ? JSON.parse(saved) : null;
  });
  

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