调用getUrlParam函数时控制台输出结果异常，请求技术排查与解决

我帮你排查了下代码里的几个关键问题，这应该就是导致输出异常的原因：

问题1：正则表达式里的HTML转义字符错误 #

你写的正则里用了&，这是HTML里的转义字符，但在JavaScript代码中，我们需要直接使用&来匹配URL里的参数分隔符，不然正则根本识别不了正确的参数结构。

问题2：未处理URL无查询参数的情况 #

当地址栏里没有?开头的查询参数时，window.location.search.split('?')[1]会返回undefined，这时候调用match()方法直接就会报错。

问题3：未处理参数不存在的情况 #

如果要获取的参数在URL里不存在，match()会返回null，这时候直接访问result[2]就会抛出"Cannot read property '2' of null"的错误。

修复后的getUrlParam函数 #

// getUrlParam() 是获取地址栏参数的函数
function getUrlParam(name) {
  // 先处理URL没有查询参数的情况
  const queryString = window.location.search.split('?')[1] || '';
  // 把正则里的&换成&，同时用模板字符串让写法更清晰
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
  const result = queryString.match(reg);
  // 处理匹配不到的情况，返回null或者空字符串可根据需求调整
  if (!result) return null;
  // 解码参数值
  return decodeURIComponent(result[2]);
}

额外的优化建议 #

在Login组件的constructor里调用这个函数是可行的，但如果你的项目是单页应用（比如用了React Router），有时候组件初始化时window.location.search可能还没更新到最新状态。这时候可以考虑把获取参数的逻辑放到componentDidMount生命周期里，或者直接用路由提供的参数获取方法：

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: null
    };
  }

  componentDidMount() {
    // 这里获取参数更稳妥
    const redirect = _utils.getUrlParam('redirect');
    this.setState({ redirect });
  }

  // ... 其他登录逻辑代码
}

这样调整后，应该就能解决控制台输出不正确或者报错的问题啦~

内容的提问来源于stack exchange，提问作者mmy