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

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