reactjs - mapbox GL 上的单击处理程序不响应使用带有 typescript 的 react Hook 的更新状态

Question

我正在开发这个简单的远足应用程序，在模态中显示 map ，我想在模态组件状态中设置起点和终点，然后更新父级状态。

问题是模式中的点击处理程序没有“看到”更新后的状态。

如果我在点击处理程序之外控制台记录状态，它会给我更新后的状态。

我正在使用 mapboxGL js，我想知道是否有人知道为什么会这样？我在想这可能与“点击”事件有关，因为它不会对 onClick 事件使用react？

这是模态组件的代码:

export const MapModalContent = ({
  newHike, setNewHike, setShowMapModal,
}: MapModalProps) => {
  const [map, setMap] = useState<mapboxgl.Map>();
  const [startCoords, setStartCoords] = useState<LngLat>();
  const [endCoords, setEndCoords] = useState<LngLat>();
  const mapRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);

  const [helperString, setHelperString] = useState<IHelperString>(helperStrings[0]);

  const [startMarker] = useState(new mapboxgl.Marker());
  const [endMarker] = useState(new mapboxgl.Marker());
  const [startPointIsSet, setStartPointIsSet] = useState<boolean>(false);
  const [endPointIsSet, setEndPointIsSet] = useState<boolean>(false);

  // initializes map
  useEffect(() => {
    if (mapRef.current && !map) {
      setMap(new mapboxgl.Map({
        accessToken: MAPBOX_ACCESS_TOKEN,
        container: mapRef.current,
        style: 'mapbox://styles/mapbox/outdoors-v11',
        center: [10.748503539483494, 59.92003719905571],
        zoom: 10,
      }));
    }
  }, [mapRef]);

  // adds controls and click listener to map
  useEffect(() => {
    if (map) {
      addControls({ to: map });

      map.on('click', (e) => {
        handleSetMarker(e);
      });
    }
  }, [map]);

  // these effects console the updated state as wanted
  useEffect(() => {
    console.log('Start coord: ', startCoords);
  }, [startCoords]);

  useEffect(() => {
    console.log('End coord: ', endCoords);
  }, [endCoords]);

  useEffect(() => {
    console.log('Start is set: ', startPointIsSet);
  }, [startPointIsSet]);

  useEffect(() => {
    console.log('End is set: ', endPointIsSet);
  }, [endPointIsSet]);

  // Todo: Remove this..
  setTimeout(() => {
    if (map) map.resize();
  }, 500);

  // this is the click handler that does not respond to state changes
  const handleSetMarker = (e: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
    console.log('👆', `start point: ${startPointIsSet}`, `end point: ${endPointIsSet}`);

    if (!startPointIsSet) {
      console.log('Start point not set.. Gonna set it now!');
      // setStartCoords(e.lngLat);
      startMarker.setLngLat(e.lngLat).addTo(map!);
      setStartCoords(e.lngLat);
      setStartPointIsSet(true);
    }

    if (startPointIsSet && !endPointIsSet) {
      console.log('Start point is set! Setting end point..');
      endMarker.setLngLat(e.lngLat).addTo(map!);
      setEndCoords(e.lngLat);
      setEndPointIsSet(true);
    }
  };

  const handleButtonTap = () => {
    if (startCoords) {
      // displays a new message to the user after setting start point
      setHelperString(helperStrings[1]);
    } else {
      console.warn('No start coords set!');
    }

    // sets parents state
    if (startCoords && endCoords) {
      setNewHike({
        ...newHike,
        start_point: getPointString({ from: startCoords }),
        end_point: getPointString({ from: endCoords }),
      });
      setShowMapModal(false);
    } else {
      console.warn('Some coords is null!', startCoords, endCoords);
    }
  };

  return (
    <>
      <MapContainer ref={mapRef} />
      <p style={{ margin: '1em auto 1em auto' }}>{ helperString.sentence }</p>
      <IonButton onClick={handleButtonTap}>{ helperString.button }</IonButton>
    </>
  );
};

我试过将状态提升到父级，但它给了我完全相同的结果。

我也试过向 map 添加两个单独的点击事件，但没有成功。

我尝试使用“react-mapbox-gl”包装器，但出现了同样的问题。

Answer 1

看起来因为你的处理程序作为回调附加，它关闭了 React 状态。

      map.on('click', (e) => {
        handleSetMarker(e);
      });

使用适当的依赖项尝试 useCallback。

  const handleSetMarker = useCallback((e: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
    console.log('👆', `start point: ${startPointIsSet}`, `end point: ${endPointIsSet}`);

    if (!startPointIsSet) {
      console.log('Start point not set.. Gonna set it now!');
      // setStartCoords(e.lngLat);
      startMarker.setLngLat(e.lngLat).addTo(map!);
      setStartCoords(e.lngLat);
      setStartPointIsSet(true);
    }

    if (startPointIsSet && !endPointIsSet) {
      console.log('Start point is set! Setting end point..');
      endMarker.setLngLat(e.lngLat).addTo(map!);
      setEndCoords(e.lngLat);
      setEndPointIsSet(true);
    }
  }, [startPointIsSet, endPointIsSet, endMarker, startMarker, map]);