状态切换时功能组件事件仍然有效 - REACT MAPBOX

Question

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

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

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

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

想法是当它设置为 true 时，您可以在地图上单击以设置航路点。当它为 false 时，点击会执行默认行为。

我试过使用这样的 if 语句

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

无论状态是true还是false，第一次切换后仍然可以放置航点。

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

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]);

请试试这个方法..祝你好运..

状态切换时功能组件事件仍然有效 - REACT MAPBOX

Functional component event is still active when state is toggled - REACT MAPBOX

javascript

mapbox

reactjs

use-effect

use-state