taro 偶现页面跳转路由传参丢失

复现步骤

小程序扫码获取结果并解析，通过navigateTo 方法将参数传递给下个页面；下个页面通过const router = useRouter(); 获取参数，偶现获取不到的情况

期望结果

每次都能获取到路由参数

实际结果

偶现获取不到路由参数

环境信息

 Taro CLI 3.5.5 environment info:
    System:
      OS: macOS 12.5.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
      Yarn: 1.22.17 - ~/.yarn/bin/yarn
      npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
    npmPackages:
      @tarojs/components: 3.5.5 => 3.5.5 
      @tarojs/helper: 3.5.5 => 3.5.5 
      @tarojs/plugin-framework-react: 3.5.5 => 3.5.5 
      @tarojs/plugin-platform-weapp: 3.5.5 => 3.5.5 
      @tarojs/react: 3.5.5 => 3.5.5 
      @tarojs/router: 3.5.5 => 3.5.5 
      @tarojs/runtime: 3.5.5 => 3.5.5 
      @tarojs/shared: 3.5.5 => 3.5.5 
      @tarojs/taro: 3.5.5 => 3.5.5 
      @tarojs/webpack5-runner: 3.5.5 => 3.5.5 
      babel-preset-taro: 3.5.5 => 3.5.5 
      eslint-config-taro: 3.5.5 => 3.5.5 
      react: ^18.2.0 => 18.2.0

Sep 02 '22 05:09 TheKonka

我也遇到了这个问题。 ~简单处理的话可以先这样: 用 getCurrentInstance 可以正常拿到。~ 这样解决不了。我测试下来是在调用系统 API 的回调中去跳转会出现这个问题。目前临时是给在回调中加了一个延时500ms再跳转，就没有问题了。

我的复现方式是从支付成功之后立即用 taro.redirect 跳转。在下一个页面 useRouter 取到的是前一个页面的 params

Sep 08 '22 15:09 Anoninz

我也遇到了这个问题。 ~简单处理的话可以先这样: 用 getCurrentInstance 可以正常拿到。~ 这样解决不了。我测试下来是在调用系统 API 的回调中去跳转会出现这个问题。目前临时是给在回调中加了一个延时500ms再跳转，就没有问题了。

我的复现方式是从支付成功之后立即用 taro.redirect 跳转。在下一个页面 useRouter 取到的是前一个页面的 params

👍 ，我之前都没细看，才发现打印的router数据是上个页面的

Sep 09 '22 01:09 TheKonka

Vue3
IOS
微信支付成功后通过 Taro.redirectTo 跳转到下个页面

IOS 必复现：微信支付成功后通过 Taro.redirectTo 跳转到下个页面，下个页面的 useLoad 方法里获取 Taro.getCurrentInstance().router 是上一个页面的！！

调试发现支付成功返回后貌似会掉 app的onShow，不知道是不是这个引起的Bug。

直接取useLoad 里面的参数是对的(不过官方文档上useLoad 没有参数, 用着不安心):

useLoaded((options) => {
    /// 这里是错的
    const router = Taro.getCurrentInstance().router;
     // 这里是对的
     console.log(options);
});

Nov 04 '22 09:11 ccqgithub

一样在支付后跳转或者扫码后的跳转出现参数丢失的情况。因为在IOS上这些API会导致onShow重新触发。

Nov 18 '22 06:11 Przeblysk

遇到同样问题，拿到上一个页面的params了

Nov 18 '22 10:11 dduuxxuu

+1 有几率会出现

Dec 29 '22 03:12 1604050329

getCurrentInstance的实现机制是基于onShow和onHide来进行赋值和置空，在生命周期可能错乱时，会导致异常。这也是官方说的慎用getCurrentInstance的原因。类似场景还有如果微信小程序被切入后台时，延时执行的代码在使用getCurrentInstance API时，也会中招。

Feb 02 '23 08:02 heymie

ios 16 上，在 scanCode 后调用 redirect 一定复现上述问题，有没有什么方法能绕过去？

Feb 03 '23 09:02 zzswang

ios 16 上，在 scanCode 后调用 redirect 一定复现上述问题，有没有什么方法能绕过去？

最简单的绕过方法，在拿到 scan 结果之后，setTimeout 500 ms 再 redirect 就可以解决了。（ onHide onShow 等都在这500ms内执行完了）

@zzswang

Feb 03 '23 09:02 Anoninz

@Anoninz 多谢

而且惊奇的发现，等200ms 是不行的

Feb 03 '23 10:02 zzswang

ios 16 上，在 scanCode 后调用 redirect 一定复现上述问题，有没有什么方法能绕过去？

最简单的绕过方法，在拿到 scan 结果之后，setTimeout 500 ms 再 redirect 就可以解决了。（ onHide onShow 等都在这500ms内执行完了）

@zzswang

也不能100%规避的吧

Feb 03 '23 10:02 dduuxxuu

不能

Feb 03 '23 10:02 Anoninz

mark. 支付成功之后立马跳转偶现参数丢失。解决方法：加入延时后跳转

Feb 14 '23 07:02 bigmeow

我也遇到了, 支付成功后跳转到下个页面, useRouter是上一个页面的数据, ios16, 微信8.0.33, taro3.5.11 写了个hooks处理这个问题

export default function useCacheRouter({ pagePath }: UseCacheRouterProps) {
  const router = useRouter(true);
  const [realRouter, setRealRouter] = useState<typeof router | undefined>(
    () => {
      if (router?.path === pagePath) {
        return router;
      }
    }
  );

  useReady(() => {
    if (!realRouter) {
      setRealRouter(getCurrentInstance()?.router || undefined);
    }
  });

  return {
    router: realRouter,
  };
}

Mar 14 '23 09:03 tranter1991

const pages = Taro.getCurrentPages();
const current = pages?.[pages?.length - 1];
const  params = current.options || {};

目前我是这样拿的

Apr 03 '23 08:04 Yang03

ios 16 上，在 scanCode 后调用 redirect 一定复现上述问题，有没有什么方法能绕过去？

getCurrentInstance的实现机制是基于onShow和onHide来进行赋值和置空，在生命周期可能错乱时，会导致异常。这也是官方说的慎用getCurrentInstance的原因。类似场景还有如果微信小程序被切入后台时，延时执行的代码在使用getCurrentInstance API时，也会中招。

我这边也遇到这种问题了，有啥好的写法吗

May 08 '23 07:05 XieZhiXian-NA

以往的settimeout的时间点不好把握，体验较差。最近组内小伙伴提出一个比较好的方案。可以监听页面的onshow加上支付结果回调，通过promise.all的方式，等待两个都执行后，最终抛回支付结果。示例代码如下： ` const _onShowEventId = getCurrentInstance()?.router?.onShow const _onShowPromise = () => { return new Promise((_resolve) => { if (_onShowEventId) { eventCenter.once(_onShowEventId,() => { _resolve(true) }) } else { _resolve(true) } })} let __resolve, __reject:any = null const payCallBackPromise = new Promise((_resolve, _reject) => { __resolve = _resolve __reject = _reject })

const { timeStamp, nonceStr, package: prepayId, paySign } = payToken
const signType = payToken.signType || 'MD5'

Promise.all([_onShowPromise(), payCallBackPromise]).then(([,res]) => {
  resolve(res)
}).catch((err) => {
  reject(err)
})

Taro.requestPayment({
  timeStamp: timeStamp,
  nonceStr: nonceStr,
  package: prepayId,
  signType: signType,
  paySign: paySign,
  success: res => {
    __resolve(res)
  },
  fail: res => {
    __reject(res)
  },
  complete: () => {
    //
  },
})

`

May 12 '23 03:05 heymie

这么严重的问题都没人解决吗？

May 19 '23 07:05 50431040

+1。在ios上挺大概率出现的：支付成功后跳转到下一个页面参数不正确，仍然是上一个页面的参数。

新页面 getCurrentInstance().router 和 useRouter 都拿不到 Taro v3.5.8

const router = useRouter()
useEffect(() => { 
  const params = Taro.getCurrentInstance().router?.params
}, [])

Oct 20 '23 08:10 Yalhu

同样遇到在ios上挺大概率出现的：支付成功后跳转到下一个页面是上一个页面的参数。

Oct 27 '23 11:10 lanzifeng118

Vue3

IOS

微信支付成功后通过 Taro.redirectTo 跳转到下个页面

IOS 必复现：微信支付成功后通过 Taro.redirectTo 跳转到下个页面，下个页面的 useLoad 方法里获取 Taro.getCurrentInstance().router 是上一个页面的！！

调试发现支付成功返回后貌似会掉 app的onShow，不知道是不是这个引起的Bug。

直接取useLoad 里面的参数是对的(不过官方文档上useLoad 没有参数, 用着不安心):
useLoaded((options) => {
    /// 这里是错的
    const router = Taro.getCurrentInstance().router;
     // 这里是对的
     console.log(options);
});

@ccqgithub 我看小程序官方和taro官方文档都有参数 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onLoad-Object-query https://docs.taro.zone/docs/apis/taro.hooks/useLoad