react-hook,跨页面使用同一状态机的方法和值,更新不了(解决方法模拟定时器)

8 篇文章 0 订阅
5 篇文章 0 订阅

需求场景:
我们要调用第三方文档,新开一个网页到第三方授权页面–授权成功后回调到我们自己的成功页面,在我们页面获取到成功的请求code
遇到的问题:
授权弹框,成功页面都使用同一状态机(授权成功以后使用状态机,更新不了状态机里的方法,授权弹框监听不到)
解决问题:

在成功页面存储code值,在url添加后缀

 useEffect(() => {
    if (repHost && window.location.origin !== repHost) {
      let url = repHost + AUTHORIZATION_SUC;
      if (code) {
        url = url + '?code=' + code + '&state=' + state;
      } else {
        url = url + '?wps=' + wps;
      }
      window.location.href = url;
      return null;
    }
    if (code) {
      // 腾讯文档 授权成功
      gooStorage.set('txCode', code);
    }
    if (wps) {
      // 金山文档 授权成功
      gooStorage.set('wpsCode', wps);
    }
    setTimeout(() => {
      // 关闭当前窗口
      window.open('about:blank', '_top').close();
    }, 500);
  }, []);

在授权弹框页面定时器浏览器有没有存储code,注意监听就取消定时器

  useEffect(() => {
    props.updateState({ toSpaceId: spaceId, toBookId: bookId });
    // 定时器查看 是否授权成功
    codeTimer = setInterval(() => {
      const txCode = gooStorage.get('txCode');
      const wpsCode = gooStorage.get('wpsCode');
      if (txCode) {
        // 腾讯授权成功
        props.updateAuthorizeType(true);
        TxGetToken({ code: txCode });
        clearInterval(codeTimer);
        gooStorage.remove('txCode');
      }
      if (wpsCode) {
        // 金山授权成功
        props.updateAuthorizeType(true);
        clearInterval(codeTimer);
        gooStorage.remove('wpsCode');
      }
    }, 1000);

    return () => {
      // 离开
      gooStorage.remove('txCode');
      gooStorage.remove('wpsCode');
      clearInterval(codeTimer);
    };
  }, [authorizeOpen, authorizeType]);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Typewriter Hook是一个使用React Hooks来实现打字机效果的库。它可以帮助我们在React应用中轻松地实现打字机效果。 要使用React Typewriter Hook,我们首先需要通过npm来安装它,命令如下:npm install react-typewriter-hook使用React Typewriter Hook的核心代码包括引入React和useTypewriter钩子,并在组件中使用useTypewriter钩子来创建打字效果。例如,在一个名为Note的组件中,我们可以通过useTypewriter钩子传入一个字符串来实现打字效果。 具体使用React Typewriter Hook的例子可以在官方文档中查看。在使用时,我们只需要根据示例的用法将useTypewriter钩子应用在需要实现打字效果的地方即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【分享创造】react-typewriter-hook: 用react hooks来实现打字机的效果](https://blog.csdn.net/weixin_33924312/article/details/88613110)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [React引入react-typewriter-hook实现打字效果](https://blog.csdn.net/AK852369/article/details/119819250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [react-typewriter-hook:Use使用react钩子轻松输入效果](https://download.csdn.net/download/weixin_42131276/18402977)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值