React+Mapbox中useEffect内状态变更未生效的点击事件问题

你的核心问题是Mapbox事件监听器未被清理：每次value状态变更时，useEffect都会给map新增一个click事件监听器，但之前绑定的旧监听器没有被移除。当你点击标记时，所有历史绑定的监听器都会触发——初始value="a"时绑定的监听器执行if分支输出aaa并弹窗，后续value变为非"a"时绑定的新监听器执行else分支输出bbb，所以会同时看到所有日志。

在useEffect的清理函数中移除对应的事件监听器，确保每次状态更新时只保留最新的监听器：

useEffect(() => {
  // 单独定义事件处理函数，方便后续移除
  const handleMarkerClick = (e) => {
    if (value === "a") {
      console.log('aaa');
      new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(`<div>popup</div>`)
        .addTo(map);
    } else {
      console.log('bbb');
      console.log('other works work');
      // 执行其他业务逻辑
    }
  };

  // 绑定点击事件
  map.on('click', 'markers', handleMarkerClick);

  // 清理函数：依赖更新或组件卸载时移除旧监听器
  return () => {
    map.off('click', 'markers', handleMarkerClick);
  };
}, [value, map, coordinates]);

• 不能使用匿名函数作为事件处理逻辑，否则map.off无法匹配到对应的监听器完成移除操作。
• 依赖数组要包含所有在处理函数中用到的外部变量（map、coordinates），避免闭包导致的旧值引用问题。
• 清理函数会在value变更或组件卸载时自动执行，确保旧监听器被及时清理，每次点击只会触发当前最新的分支逻辑。

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