Taro.navigateBack的回调中再跳转页面会无限新增跳转目标页面dom至页面卡死

[boyue0]

相关平台

H5

浏览器版本: Chrome 92 使用框架: React

复现步骤

页面A跳转页面B，页面B使用Taro.navigateBack，complete中使用 Taro.navigateTo跳转页面C； 结果：html里无限新增页面C的Dom节点 stamp自增，导致页面卡死

期望结果

期望新增一个目标页面Dom，正常跳转到目标页面

实际结果

无限新增目标页面Dom至页面卡死

环境信息

  Taro CLI 3.5.0 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v14.16.1/bin/yarn
      npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.5.7 => 3.5.7 
      @tarojs/components: 3.5.7 => 3.5.7 
      @tarojs/mini-runner: 3.5.7 => 3.5.7 
      @tarojs/plugin-framework-react: ^3.5.6 => 3.5.8 
      @tarojs/react: 3.5.7 => 3.5.7 
      @tarojs/runtime: 3.5.7 => 3.5.7 
      @tarojs/taro: 3.5.7 => 3.5.7 
      @tarojs/webpack-runner: 3.5.7 => 3.5.7 
      babel-preset-taro: 3.5.7 => 3.5.7 
      eslint-config-taro: 3.5.7 => 3.5.7 
      react: ^17.0.0 => 17.0.2 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.10 

[AdvancedCat]

Taro.navigateXXX 在 H5 端是通过 history 库模拟的，在执行完 navigate 后，history.listen 会监听回调

const unListen = history.listen(() => {
      const res = { errMsg: `${method}:ok` }
      success?.(res)
      complete?.(res)
      resolve(res)
      unListen()
    })

你在 complete 中又执行了 Taro.navigateTo 方法，导致 unlisten 方法无法得到执行机会，因此listen回调就会一直触发

[AdvancedCat]

你可以将 Taro.navigateTo("C") 放到微任务队列里，让 history.listen 回调同步执行完即可

[ZakaryCode]

或许可以考虑优化路由相关 complete 等回调方法调用机制，推迟到 history.listen 之后触发