状态变化未反映在 useEffect 内部 [map.on(\'click\') mapbox]答案

【问题标题】：state change is not reflected inside useEffect [map.on('click') mapbox]状态变化未反映在 useEffect 内部 [map.on(\'click\') mapbox]
【发布时间】：2022-12-10 06:39:47
【问题描述】：

我正在尝试有条件地在 useEffect 中做一些工作。在这里，我使用了 mapbox 和 react hooks。

我想做的是，例如，如果状态变量是“a”，我想在单击标记时显示弹出窗口。如果不是“a”，我不想显示弹出窗口。

我的第一次尝试：

useEffect(() => {
    map.on('click', 'markers', (e) => {
        if (value === "a") {
            console.log('aaa');
            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML(`<div>popup</div>`)
                .addTo(map);
        }
        else {
            // other work ... but not showing popup 
            console.log('bbb');
            console.log('other works work');
        }
    });
}, [value]);

结果是连线的，因为每次我单击标记时，控制台都会记录 3 个 console.logs。

// aaa
// bbb
// other works work

该州运作良好。我怎样才能做到这一点？

我尝试在线研究并尝试了以下方法。不工作。与上面相同的结果。

useEffect(() => {
    map.on("click", "markers", (e) => { myfun(e); });
}, [value]);

const myfun = useCallback(
   (e) => {
      if (value === "a") {
        console.log('aaa');
        new mapboxgl.Popup()
           .setLngLat(coordinates)
           .setHTML(`<div>popup</div>`)
           .addTo(map);
      } else {
        // other work ... but not showing popup 
        console.log('bbb');
        console.log('other works work');
      }
    },
    [value]
  );

首次加载页面，value的初始值为a，我只能看到弹出窗口。（这很好）。然后我改变了状态，它变成了 NOT a，我开始看到弹出窗口，也从 else 块开始工作。我只想看到 else 阻止工作。

也试过这个。

useEffect(() => {
    if (value === "a") {
        map.on("click", "markers", (e) => {
            // show popup
        }
    }
    else {
        map.on("click", "markers", (e) => {
            // do other works
        }
    }

}, [value]);

【问题讨论】：

标签： reactjs react-hooks state mapbox

【解决方案1】：

在useEffect中使用cleanup函数就可以正常工作了例子：

useEffect(() => {
  map.on('click', 'markers', onClickHandler);

  return () => {
    map.off('click', 'markers', onClickHandler);
  }
}, [map, value])

资料来源：
How to disable an event listener in mapbox? https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

【讨论】：