React项目useEffect竞态问题排查与解决求助

核心问题 #

1. 变量误用：你把整个URL查询字符串search转成小写赋值给searchTerm，但实际应该用从neighborhood参数获取的param值。search是完整的查询串（比如?neighborhood=Manhattan），转小写后和locations里的linktitle（比如Manhattan）完全不匹配，导致currentObj始终是undefined，调用currentObj.id自然报错。
2. 未处理空值情况：即使searchTerm正确，也可能找不到匹配的location，直接访问currentObj.id会崩溃。
3. 依赖数组不完整：useEffect依赖的locations、toggleFilter、setAvailabilitiesFilter、resetAllFilters都没加入依赖数组，会导致闭包问题（比如locations还没加载完成就执行find）。

修正后的代码 #

useEffect(() => {
  const search = window.location.search;
  const params = new URLSearchParams(search);

  if (params.has("neighborhood")) { // 用params.has更可靠，避免search.includes误判
    const param = params.get("neighborhood");
    const searchTerm = param?.toLowerCase() || ""; // 可选链处理param为null的情况

    if (searchTerm) {
      const currentObj = locations.find(item => 
        item.linktitle.toLowerCase().includes(searchTerm)
      );

      // 必须先判断currentObj存在再执行后续操作
      if (currentObj) {
        toggleFilter(currentObj.id);
        setAvailabilitiesFilter([currentObj.id]);
      }
    }
  }

  return () => resetAllFilters();
}, [locations, toggleFilter, setAvailabilitiesFilter, resetAllFilters]); // 加入所有依赖

关键优化点 #

• 替换search.includes("neighborhood")为params.has("neighborhood")，更准确判断参数是否存在，避免查询串中其他字段包含"neighborhood"导致误触发。
• 用param?.toLowerCase()处理params.get("neighborhood")返回null的情况（比如参数存在但值为空）。
• 增加currentObj存在性判断，防止找不到匹配项时崩溃。
• 补全依赖数组，确保useEffect在locations更新或相关函数引用变化时重新执行，解决闭包和竞态问题。

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