【taro react】---- h5跳转后生命周期多次执行
【taro react】---- h5跳转后生命周期多次执行
Rattenking
发布于 2022-05-09 17:44:01
发布于 2022-05-09 17:44:01
1. 问题场景
在这里插入图片描述
从上图可以看到，进入页面同一个接口执行了两次【当然这个次数不是固定的，会出现三次也会出现一次】，检查了页面代码，只在onShow生命周期请求了一次接口！
在这里插入图片描述
2. 问题原因
测试实例1：搜索参数name=123，正常
http://localhost:10086/#/pages/goodsList/goodsList?name=123
测试实例2：搜索参数name=a，正常
http://localhost:10086/#/pages/goodsList/goodsList?name=a
测试实例3：搜索参数name=A，正常
http://localhost:10086/#/pages/goodsList/goodsList?name=A
测试实例4：搜索参数name=中，异常
http://localhost:10086/#/pages/goodsList/goodsList?name=中通过测试，可以看到在参数是中文的时候，生命周期就会出现异常，执行多次！
3. 解决办法
- 将中文参数使用 encodeURI ，就解决了问题！
Taro.navigateTo({
url: `pages/goodsList/goodsList?name=${encodeURI(name)}`
})缺点：每一个存在中文的参数，都需要使用encodeURI，调用频繁！
- 对跳转方法进行封装，对完整 url 使用 encodeURI ，就不需要每次都调用！
function $route(opts){
let { type = 'navigateTo', url = ''} = opts;
url = encodeURI(url);
type = types[type] ? type : 'navigateTo';
Taro[type].call(Taro, { url });
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-05-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录