遍历JSON实现工作地点筛选并向URL传递参数的代码问题排查

现有代码核心问题 #

• Array.filter() 是不可变方法，调用后会返回筛选后的新数组，不会修改原数组。原代码在switch分支中调用filter后没有接收返回值，筛选逻辑完全不生效。
• useEffect 不支持直接传入async函数作为回调。async函数默认返回Promise对象，而React期望useEffect回调返回清理函数，直接传async回调会导致组件清理逻辑失效，引发内存泄漏问题。
• 原代码在default分支直接把岗位列表赋值为null，无筛选条件时会丢失全量岗位数据，导致页面无内容展示。
• 原代码尝试读取condition.con属性传参：condition是岗位数组，不存在con字段，最终传给URL的只会是undefined。同时URL参数不需要传递全量岗位数据，只需要同步筛选规则即可，传全量对象会导致URL格式异常、长度超限。
• 构造URLSearchParams时传入null作为参数值，最终会被序列化成字符串"null"，导致URL出现jobs=null这类无效参数。
• useEffect依赖数组仅传入了jobCondition，回调中用到的其他状态（jobFilter、locationFilter等）会因为闭包特性拿到旧值，导致参数同步错误。
• 原代码完全没有把筛选后的岗位数据同步到页面渲染状态的逻辑，就算筛选执行成功，页面也不会展示筛选后的结果。

修正后可运行代码 #

useEffect(() => {
  // 内部定义异步函数，规避useEffect不能直接接async回调的问题
  const loadAndFilterJobs = async () => {
    const allJobs = await getJobs();
    let filteredJobs = allJobs;

    // 执行地点筛选，注意接收filter返回的新数组
    switch (jobCondition) {
      case 'On-site':
        filteredJobs = allJobs.filter(job => job.jobLocation === 'in_person');
        break;
      case 'Remote':
        filteredJobs = allJobs.filter(job => job.jobLocation === 'remote');
        break;
      case 'Hybrid':
        filteredJobs = allJobs.filter(job => job.jobLocation === 'hybrid');
        break;
      // 默认无筛选条件时保留全量岗位数据
      default:
        break;
    }

    // 把筛选后的结果更新到页面状态，驱动视图渲染
    // 替换成你自己项目里的岗位列表状态更新方法，比如setJobList(filteredJobs)

    // 构造URL参数，空值传undefined会被自动忽略，不会生成无效的null参数
    const searchParams = new URLSearchParams({
      jobs: jobFilter || undefined,
      location: locationFilter || undefined,
      since: datePosted || undefined,
      workMode: jobCondition || undefined
    });

    history.push({
      pathname: '/',
      search: searchParams.toString()
    });
  };

  loadAndFilterJobs();
  // 补全所有依赖项，避免闭包拿到旧状态
}, [jobCondition, jobFilter, locationFilter, datePosted, history]);

补充提示：如果需要实现页面刷新后筛选状态不丢失，需要在页面初始化时从URL的search参数中读取对应筛选值，反向赋值给jobCondition、jobFilter这些状态变量即可。如果需要在URL中携带筛选结果的标识，建议只传岗位ID拼接的字符串，不要直接传完整岗位对象。

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