React useEffect无限循环及URL传参失效问题求解

1. 无限循环触发原因 #

• 核心错误在getJobsLocation函数内部：函数处理完接口返回值后，无任何终止判断就递归调用自身getJobsLocation(searchResults)，且函数定义未声明形参，传入的参数完全不生效，每次调用都会重新发起接口请求、生成临时数组、再次触发自调用，形成无终止递归。
• 语法冗余错误：switch语句块闭合后多余编写了[condition]数组访问代码，属于无效逻辑，会干扰正常代码执行流。
• 额外触发诱因：useEffect执行时会调用history.push修改路由，如果招聘列表组件是路由匹配渲染的组件，每次路由变更会触发组件重渲染，若getJobsLocation定义在组件函数作用域内，每次渲染会生成全新的函数引用，进一步放大重复执行问题。

2. conditions参数传参失效原因 #

• 异步逻辑未等待：getJobsLocation是async声明的异步函数，直接调用let condition = getJobsLocation();拿到的是Pending状态的Promise对象，而非最终的地点列表数据；且Promise原型上不存在filter方法，后续执行condition.filter()时会直接抛出类型错误，中断逻辑。
• 函数无返回值：getJobsLocation内部生成了searchResults数组，但没有写return语句返回该数组，就算加了await等待异步结果，拿到的也是undefined。
• filter方法使用错误：Array.filter()是纯函数，执行后返回全新的过滤后数组，不会修改原数组。代码中switch分支内直接调用condition.filter()没有接收返回值，过滤结果被直接丢弃。
• 字段名不匹配：处理接口数据时，存入结果数组的对象结构是{ title: loc.jobLocation }，但后续过滤逻辑读取的是con.jobLocation属性，属性名不一致导致判断条件永远不成立，过滤结果始终为空。
• 传参格式错误：拼接URL参数时直接用模板字符串转换数组，当数组元素为对象时，默认转换结果为[object Object]，不是合法的参数值，后端无法识别。

// 建议将不依赖组件状态的请求函数移到组件外，避免重渲染时重复生成函数引用
const getJobsLocation = async () => {
  const queryParams = { page: 1, limit: 10 };
  const response = await getJobs(queryParams);
  if (!response?.data?.nodes) {
    return [];
  }
  // 统一字段名，和后续过滤逻辑对齐
  return response.data.nodes.map((loc) => ({ jobLocation: loc.jobLocation }));
};

useEffect(() => {
  const fetchAndFilter = async () => {
    const locationList = await getJobsLocation();
    let condition = null;
    switch (jobCondition) {
      case 'On-site':
        // 接收filter返回的新数组
        condition = locationList.filter((con) => con.jobLocation === 'in_person');
        break;
      case 'Remote':
        condition = locationList.filter((con) => con.jobLocation === 'remote');
        break;
      case 'Hybrid':
        condition = locationList.filter((con) => con.jobLocation === 'hybrid');
        break;
      default:
        condition = null;
    }

    const baseParams = {
      jobs: jobFilter || null,
      location: locationFilter || null,
    };

    if (condition && condition.length > 0) {
      // 按后端要求序列化参数，不要直接转对象字符串，多值场景建议用逗号拼接合法值
      const params = new URLSearchParams({
        ...baseParams,
        since: datePosted || null,
        conditions: condition.map(item => item.jobLocation).join(','),
      });
      history.push({ pathname: '/', search: params.toString() });
      return;
    }

    const params = new URLSearchParams({
      ...baseParams,
      since: null,
      conditions: null,
    });
    history.push({ pathname: '/', search: params.toString() });
  };

  fetchAndFilter();
  // 注意：useEffect依赖要补全所有用到的响应式变量，否则会拿到闭包旧值
}, [jobCondition, jobFilter, locationFilter, datePosted, history]);

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