如何从react-singleton-context返回的含Provider/Consumer对象提取sharedData？

你现在调用useSharedDataContext()拿到的是Context本身（包含Provider和Consumer），而非实际共享数据，问题出在你没正确使用这个库的API，解决步骤如下：

• 确认Context的正确创建与导出
  使用react-singleton-context的createSharedContext方法时，它会返回封装好的Provider组件和用于消费数据的自定义钩子，而非让你直接操作Context对象。正确的创建代码应该是：

  import { createSharedContext } from 'react-singleton-context';
  
  // 初始化共享数据
  const initialSharedData = { /* 你的初始数据 */ };
  
  // 解构出Provider和消费钩子
  const { SharedDataProvider, useSharedData } = createSharedContext(initialSharedData);
  
  // 导出这两个，而非Context本身
  export { SharedDataProvider, useSharedData };
  

• 在Menu组件中用自定义钩子消费数据
  不要调用返回Context对象的useSharedDataContext，而是直接使用上面导出的useSharedData钩子：

  // Menu.js
  import { useSharedData } from './your-context-file-path';
  
  function Menu() {
    // 这里直接拿到实际的sharedData值
    const sharedData = useSharedData();
    console.log(sharedData);
  
    // 后续组件逻辑
    return <div>{/* 组件内容 */}</div>;
  }
  

• 确保组件在Provider包裹范围内
  你的Menu组件必须被SharedDataProvider包裹，否则钩子无法获取到共享数据。比如在根组件中：

  import { SharedDataProvider } from './your-context-file-path';
  import Menu from './Menu';
  
  function App() {
    return (
      <SharedDataProvider>
        <Menu />
        {/* 其他需要共享数据的组件 */}
      </SharedDataProvider>
    );
  }
  

如果你之前错误地导出了Context对象（比如直接返回createSharedContext的结果），请按上述方式调整，用库提供的自定义钩子来消费数据，而不是直接操作Context对象。

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