Mapbox点击事件中React useState状态无法更新的问题求助

核心原因分析 #

• 闭包捕获旧状态：初始useEffect无依赖数组，仅执行一次，点击回调捕获的是组件首次渲染时的geojson状态，所以每次点击打印的都是初始值。不过你用函数式更新setGeoJson的写法是正确的，状态实际已经在更新，只是打印的是闭包里的旧值。
• 重复绑定事件：给useEffect添加[drawingMap, geojson]依赖后，每次状态变化或drawingMap更新都会重新执行useEffect，每次都调用map.on('click')绑定新回调，旧回调未移除，导致点击时多个回调触发，出现3-5次执行的情况。

正确实现方案 #

方案1：单次事件绑定，修正闭包问题 #

如果只需绑定一次点击事件，用函数式更新确保基于最新状态修改，同时通过useEffect监听状态变化来打印最新值：

const [geojson, setGeoJson] = useState<any>({
  features: [],
  type: "FeatureCollection",
});

// 监听geojson变化，打印最新状态
useEffect(() => {
  console.log("最新geojson:", geojson);
}, [geojson]);

useEffect(() => {
  if (drawingMap.current) return;

  drawingMap.current = new mapboxgl.Map({
    // 你的地图配置项
  });

  const handleMapClick = (e: any) => {
    const feature = {
      geometry: {
        coordinates: [-66.324462, -16.024695],
        type: "Point",
      },
      properties: {
        iconSize: [60, 60],
        message: "Foo",
      },
      type: "Feature",
    };

    // 函数式更新，确保基于最新前序状态修改
    setGeoJson((prevState) => ({
      ...prevState,
      features: [...prevState.features, feature],
    }));
  };

  drawingMap.current.on("click", handleMapClick);

  // 组件卸载时移除事件监听，避免内存泄漏
  return () => {
    if (drawingMap.current) {
      drawingMap.current.off("click", handleMapClick);
    }
  };
}, []); // 空依赖数组，仅执行一次

方案2：需依赖geojson时，避免重复绑定 #

如果点击逻辑确实需要依赖最新的geojson，必须在useEffect的清理函数中移除旧监听：

const [geojson, setGeoJson] = useState<any>({
  features: [],
  type: "FeatureCollection",
});

useEffect(() => {
  if (!drawingMap.current) return;

  const handleMapClick = (e: any) => {
    const feature = {
      geometry: {
        coordinates: [-66.324462, -16.024695],
        type: "Point",
      },
      properties: {
        iconSize: [60, 60],
        message: "Foo",
      },
      type: "Feature",
    };

    setGeoJson((prevState) => ({
      ...prevState,
      features: [...prevState.features, feature],
    }));
  };

  drawingMap.current.on("click", handleMapClick);

  // 清理旧监听，防止重复绑定
  return () => {
    drawingMap.current?.off("click", handleMapClick);
  };
}, [geojson]); // 依赖geojson，状态变化时重新绑定

关键注意点 #

• 始终用函数式更新状态：setGeoJson(prev => ...)能确保每次修改都基于最新的前一次状态，规避闭包陷阱。
• 必须添加清理函数：Mapbox事件监听不会随组件卸载/重渲染自动移除，手动调用off可防止内存泄漏和重复触发。
• 打印最新状态：不要在点击回调中直接打印geojson，改用useEffect监听geojson变化后打印，因为回调中的geojson是闭包捕获的旧值。

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