地址变变变，你猜我是谁？src中的search存在中文导致两次重新获取数据query不同

2022-06-27 16:00:19 阅读：157 来源： 互联网

标签：src const decodeURI 变变获取数据地址 locationOrderNo router orderNo

0. 缘起

做项目的收尾工作，一堆BUG冒出来了。其中有个非常阴间的，需要指定设备才能测试，我写的假数据没法测出来的BUG，涉及到地址更改重新获取数据。后来发现是因为真实扫描数据中包含中字，而我写的假数据都是数字+英文字符混合，所以没测到。刚好关于react-router的地址query遇到过两回了，写一点记录一下。

1. React-router中的各个玩意

1.1 useHistory

import {useHistory} from 'react-router-dom'
const history = useHistory()

// 跳转到指定地址
history.replace(`/micro/image/recordImg/imgEdit?id=${orderId}`);

1.2 useLocation

import {useLocation} from 'react-router-dom'
const location = useLocation()

// 当前地址参数
const path = location.search;
const isEditFromScan = path.includes('orderNo')

2. 出错位置

2.1 源码中涉及到地址改变重新获取数据的部分

  const getDetail = useCallback(
    (editType, queryTypeNew) => {
      dispatch(
        changeEditType({
          type: editType,
          queryType: queryTypeNew,
        }),
      );
      dispatch(
        queryOrderDetailFunc({
          orderId: locationOrderId,
          orderNo: locationOrderNo,
          partyId: locationPartyId,
          timestamp: locationTimestamp,
          sign: locationSign,
        }),
      );
    },
    [dispatch, locationOrderId, locationOrderNo, locationPartyId, locationSign, locationTimestamp],
  );

根据当前的locationOrderNo，重新获取当前数据。然而如果locationOrderNo更改，举例更改为?orderNo=114514飞雪ask。

第一遍直接拿当前地址栏的query，接口返回是正常的。第二遍，地址转码，变成?orderNo=114514%E9%A3%9E%E9%9B%AAask。这堆浏览器转码过去的传参，返回值就是找不到了，就挂了。

测试转码MDN地址： decodeURI() - JavaScript | MDN (mozilla.org)

const uri = 'https://mozilla.org/?orderNo=114514飞雪ask';
const encoded = encodeURI(uri);
console.log(encoded);

try {
  console.log(decodeURI(encoded));
} catch (e) { // catches a malformed URI
  console.error(e);
}

// > "https://mozilla.org/?orderNo=114514%E9%A3%9E%E9%9B%AAask"
// > "https://mozilla.org/?orderNo=114514飞雪ask"

3. 解决办法：decodeURI

注意参数中不要有\这样的转义字符，直接decodeURI

orderNo: decodeURI(locationOrderNo),

标签：src,const,decodeURI,变变,获取数据,地址,locationOrderNo,router,orderNo
来源： https://www.cnblogs.com/lepanyou/p/16416399.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9