外部包中React Context无法保存状态的问题排查求助

看起来你遇到的核心问题是SDK内部的React状态没有正确同步——调用configure后，useEffect和startLogin始终拿到旧的空值。结合你使用pnpm单仓的环境，我判断最可能的原因是存在多个React实例，其次是配置方法的参数不匹配导致状态设置异常。

一、优先排查：多React实例导致的状态隔离 #

在pnpm单仓中，如果你的主项目和Auth SDK各自安装了独立的React包，会出现两个不同的React实例。这会导致Context的状态无法跨实例共享——SDK内部的useState更新的是自己实例的状态，而主项目的组件拿到的是另一个实例的Context值，自然看不到更新。

解决步骤： #

1. 确保SDK使用主项目的React实例
   你的SDK已经将react设为peerDependencies，但需要保证pnpm没有在SDK的node_modules中单独安装React：
   • 进入SDK目录执行pnpm install，然后检查node_modules是否有react目录，如果有直接删除。
   • 在单仓根目录的package.json中，通过workspace协议锁定依赖版本，确保主项目和SDK共用同一React：

     "peerDependencies": {
       "react": "^18.3.1"
     },
     "devDependencies": {
       "react": "workspace:^18.3.1"
     }
     

2. 验证是否存在多实例
   在主项目和SDK中分别添加日志，打印React的版本和引用地址：

   // 主项目根组件中
   import React from 'react';
   console.log('主项目React:', React.version, React);
   
   // SDK的auth-context.tsx中
   import React from 'react';
   console.log('SDK React:', React.version, React);
   

   如果两个打印的React对象地址不一致，就说明存在多实例问题，按照上面的方法修复即可。

二、修正配置方法的参数不匹配问题 #

看你的代码，AuthService接口定义的configure需要4个参数，但AuthServiceProvider中的实现只接收1个字符串：

// 接口定义
configure: (
 appType: string,
 baseAuthSiteUrl: string,
 baseAuthApiUrl: string,
 defaultRedirectUrl: string
) => void;

// 实际实现
const configure = React.useCallback((value: string) => {
 setExampleValue(value);
 setIsConfigured(true);
}, []);

如果主项目调用时传入了4个参数，实际只有第一个会被赋值，后面的参数被忽略；如果传参逻辑完全不匹配，exampleValue可能始终是空字符串，导致后续逻辑报错。

解决步骤： #

• 统一参数定义和实现：要么修改接口匹配现有实现，要么调整实现兼容接口。比如如果需要4个参数，修改实现：

  const configure = React.useCallback((
    appType: string,
    baseAuthSiteUrl: string,
    baseAuthApiUrl: string,
    defaultRedirectUrl: string
  ) => {
    // 根据业务需求设置状态，比如把appType赋值给exampleValue
    setExampleValue(appType);
    setIsConfigured(true);
  }, []);
  

  同时确保主项目调用时传入的参数和实现完全匹配。

三、其他可能的排查点 #

1. 确认Context Provider的层级
   确保AuthServiceProvider包裹了所有使用useAuth的组件，比如在主项目的根组件中：

   import { AuthServiceProvider } from 'anonymized-package-name';
   
   function App() {
     return (
       <AuthServiceProvider>
         {/* 所有子组件都放在这里面 */}
       </AuthServiceProvider>
     );
   }
   

2. 验证vite的external配置
   你的vite.config.ts已经将react设为external，确保构建时不会把React打包进SDK，而是依赖主项目的React：

   rollupOptions: {
     external: ['react']
   }
   

   可以检查构建后的dist/index.js，里面应该只包含SDK自身的代码，不会有React的源码。

测试验证 #

修复上述问题后，重新构建SDK（pnpm build），更新主项目的依赖，然后测试：

1. 调用configure并传入正确参数。
2. 检查console.log(exampleValue)是否打印出传入的值。
3. 调用startLogin，确认不再抛出未配置的错误。

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