React Hooks下Google Map组件设置查询参数值不更新问题求助

你的问题本质是React Hooks的闭包陷阱：你传给地图子组件的updateChildComponentHandler在首次渲染时被创建，捕获了首次渲染时的neighborhood、pathname等变量的初始值（也就是neighborhood = "any"的状态）。后续路由更新后，子组件调用的依然是首次渲染时创建的旧函数，所以一直拿到的是初始值。

解决方案 #

1. 用useCallback包裹处理函数，补全依赖项 #

给updateChildComponentHandler包上useCallback，把函数内用到的所有外部变量都加到依赖数组里，确保路由更新后函数会重新生成，拿到最新的参数值。同时建议将neighborhood的操作从字符串替换改为数组操作，避免边界判断遗漏：

import { useCallback } from 'react';

const updateChildComponentHandler = useCallback((dataFromChild, addorRemove) => {
  SetLastSetter("map");
  SetNeighborhoodTypeSelected("custom");

  // 转成数组操作，避免字符串替换的各种边界问题
  const neighborhoodList = neighborhood === "any" ? [] : neighborhood.split("&");

  if (addorRemove === "add") {
    neighborhoodList.push(dataFromChild);
    SetMapChangeType("add");
  }

  if (addorRemove === "remove") {
    const newList = neighborhoodList.filter(item => item !== dataFromChild);
    if (newList.length === 0) {
      SetMapChangeType("add");
    } else {
      SetMapChangeType("delete");
    }
    deleteListings(dataFromChild);
  }

  // 构造新的neighborhood值
  const newNeighborhood = neighborhoodList.length === 0 ? "any" : neighborhoodList.join("&");
  // 按路由结构直接构造新路径，比字符串replace更稳妥，可根据你实际的路由格式调整
  const newPath = `/${region}/${state}/${newNeighborhood}/${transactiontype}`;
  history.push(`${newPath}${search}`);

  SetUpdateMap(true);
// 所有用到的外部变量都要加到依赖数组中
}, [neighborhood, region, state, transactiontype, search, deleteListings]);

2. 确保子组件能接收到最新的处理函数 #

如果你的地图子组件用了React.memo做性能优化，要确认updateChildComponentHandler作为prop传入时，函数引用变化会触发子组件重渲染，不要添加不必要的prop比较逻辑阻断更新。

3. 补全useEffect的依赖项 #

你当前的useEffect里用到了mapChangeType、requestMulti等变量，这些都要加到依赖数组里，否则effect里拿到的也会是旧的状态值：

useEffect(() => {
  // 原有逻辑保持不变
}, [neighborhood, mapChangeType, requestMulti, transactiontype, filteredRegion, state, filters, fetchProperties]);

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