React Leaflet搜索栏if/else分支均执行的问题排查

1. 事件重复绑定导致多次触发handler #

你的代码里map.on("geosearch/showlocation", handler)直接写在组件函数体中，React组件每次渲染（比如props变化、状态更新）都会执行这段代码，导致同一个事件被绑定了多个handler实例。当你选择城市时，所有绑定的handler都会被调用，可能有的handler判断结果为存在，有的为不存在，看起来就像if/else分支同时执行了。

2. 存在性判断逻辑错误 #

你用了Array.every()来判断城市是否已存在，这个方法的逻辑是所有元素都满足条件时才返回true。你的判断条件是city.location.id !== place_id，意味着：

• 如果所有城市的id都不等于当前place_id，exists才是true（城市不存在）
• 只要有一个城市id匹配，exists就会变成false（城市存在）
  这个逻辑不仅反了，也不符合判断"是否存在"的常规写法，应该用Array.some()——只要有一个元素满足条件就返回true，更适合做存在性校验。

修正后的代码 #

export default function SearchBar({
  onSubmitCityMapSearch,
  setCurrLocation,
  onSetFocus,
  cities,
}) {
  function handler(event) {
    const {
      location: {
        label,
        y,
        x,
        raw: { place_id },
      },
    } = event;

    // 修正存在性判断：用some检查是否有匹配的城市
    const exists = cities.some((city) => city.location.id === place_id);
    if (exists) {
      console.log("It exists");
      return; // 存在则直接返回，不执行后续逻辑
    }
    // 不存在时执行以下操作
    onSubmitCityMapSearch();
    setCurrLocation({ label, location: [y, x], id: place_id });
    onSetFocus(place_id);
  }

  const provider = new OpenStreetMapProvider();

  const searchControl = new GeoSearchControl({
    provider: provider,
    style: "bar",
    showMarker: false,
  });

  const map = useMap();
  useEffect(() => {
    map.addControl(searchControl);
    // 将事件绑定移到useEffect中，确保只绑定一次
    map.on("geosearch/showlocation", handler);
    
    return () => {
      map.removeControl(searchControl);
      // 组件卸载时移除事件监听，避免内存泄漏
      map.off("geosearch/showlocation", handler);
    };
  }, [map, handler]); // 添加依赖，确保handler更新时重新绑定事件

  return null;
}

额外说明 #

• 把事件绑定和移除都放到useEffect里，配合清理函数，既能避免重复绑定，也能防止组件卸载后残留事件监听导致内存泄漏。
• 用return替代else分支，代码更简洁，逻辑更清晰。
• useEffect的依赖数组要加上handler和map，因为handler是组件内定义的函数，每次渲染都会重新创建，依赖数组里加上它能确保事件监听始终绑定最新的handler。

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