切换状态时，功能组件事件仍处于活动状态 - REACT MAPBOX

Question

我正在尝试构建一个应用程序，您可以通过单击导航项来切换效果。

在导航项目上，我有一个切换状态的事件监听器

const [marker, setMarker] = useState(false);

onClick={() => setMarker(!marker)}

这个想法是当它设置为true时，你可以点击地图来设置一个航点。 当它为假时，单击会执行默认行为。

我尝试使用这样的 if 语句

    if (marker) {
      map.current.on('click', (e) => {
        new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map.current);
        // Create a new marker.
      });
    }

无论状态是真还是假，您仍然可以在第一次切换后放置一个航点。

有人可以告诉我我在这里缺少什么吗？ 我知道这很愚蠢。

Answer 1

当我开始使用 React Hooks 时，我也遇到了同样的问题！ 不用担心，那是因为您没有删除为map Ref 添加的click事件的代码！ 所以你只需要清理地图对象的click事件！

useEffect(() => {
    function clickHandler(e) {
        new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map.current);
        // Create a new marker.
    }
    if (marker) {
        map.current.on('click', (e) => {
            clickHandler(e)
        });
    }
    return () => {
        map.current.removeEventListener('click', clickHandler)
    }
}, [marker]);

请尝试这种方式..祝你好运..