React+TS集成oidc-client出现登录回调状态不匹配错误

出现这个问题的核心是processSigninCallback被重复调用了两次：第一次调用已处理完登录回调并清除了存储中的state值，第二次调用时找不到匹配的state就会抛出错误，而这次调用属于冗余执行。具体触发场景如下：

• React StrictMode 引发的重复渲染：开发环境下，React的StrictMode会对组件的渲染逻辑、副作用函数进行二次调用，用于检测潜在代码问题。如果LoginCallback组件在useEffect中调用processSigninCallback，且未设置正确的依赖项或清理逻辑，就会被执行两次。第一次调用完成回调处理并清空存储的state，第二次调用自然触发找不到state的错误。

• 路由规则重复匹配：若路由配置中存在多条规则都能匹配/signin-callback路径（比如同时配置了精准匹配和模糊匹配的路由），会导致LoginCallback组件被多次挂载，进而触发两次processSigninCallback调用。

• 组件重复挂载：如果在项目路由配置或上层组件中，LoginCallback组件被多次引入，或是存在嵌套路由的错误配置，会导致组件被实例化两次，各自执行一次processSigninCallback。

内容的提问来源于stack exchange，提问作者Matteo Pietro Peru