如何在React Native中获取API返回链接的query string参数ref值

解决方案 #

你可以直接用原生的URL和URLSearchParams接口提取参数，React Native环境完全支持该特性，修改后代码如下：

React.useEffect(() => {
  // 注意：useEffect不推荐直接传async函数，会导致警告，建议内部封装异步逻辑
  const fetchData = async () => {
    try {
      const getValue = await AsyncStorage.getItem('token');
      const response = await getReferal();
      const referUrl = response.data.refferalUrl;
      // 构造URL实例
      const url = new URL(referUrl);
      // 提取ref参数
      const refCode = url.searchParams.get('ref');
      console.log(refCode); // 输出10959bc
      // 后续你可以对refCode做对应业务处理
    } catch (error) {
      console.log(error);
    }
  }
  fetchData();
}, []);

如果你的环境存在兼容性问题（极低概率），也可以用正则表达式匹配提取：

const referUrl = response.data.refferalUrl;
const refCode = referUrl.match(/[?&]ref=([^&]+)/)?.[1];
console.log(refCode); // 输出10959bc

补充说明 #

• 原代码直接给useEffect传async函数是错误写法，会导致内存泄漏警告，已经调整为内部封装异步函数的标准写法
• URLSearchParams除了get方法外，还支持has判断参数是否存在、getAll获取同参数名的多个值等能力，完全覆盖参数解析的需求

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