0

我正在用 React、TS、Mapbox、react-mapbox-gl 和 RecoilJS 构建一个应用程序。

这是Dashboard我正在使用的组件：

import React from "react";
import PageTemplate from "../../components/PageTemplate/PageTemplate";

import ReactMapboxGl from "react-mapbox-gl";

import { CGOIncidentsMapConfig } from "./Map/CGOIncidents";
import { zoomSuscriberState, clickSuscriberState } from "../../contexts/MapContext";
import { useRecoilValue } from "recoil";
import { MapEvent } from "react-mapbox-gl/lib/map-events";

const Map = ReactMapboxGl({
  accessToken: process.env.REACT_APP_MAPBOX_TOKEN ?? "",
});

const getEventHandle: (subscribers: MapEvent[]) => MapEvent = (subscribers) => (map, evt) => {
  console.log(subscribers);
  for (const event of subscribers) {
    event(map, evt);
  }
};

const Dashboard: React.FC = () => {
  const zoomSuscribers = useRecoilValue(zoomSuscriberState);
  const clickSuscribers = useRecoilValue(clickSuscriberState);

  console.log(zoomSuscribers);
  console.log(clickSuscribers);

  return (
    <PageTemplate>
      <Map
        style="mapbox://styles/mapbox/light-v10"
        containerStyle={{
          height: "100%",
          width: "100%",
        }}
        center={[-3.7, 40.44]}
        zoom={[5]}
        onZoom={getEventHandle(zoomSuscribers)}
        onClick={getEventHandle(clickSuscribers)}
      >
        <CGOIncidentsMapConfig />
      </Map>
    </PageTemplate>
  );
};

export default Dashboard;

这是CGOIncidentsMapConfig简化的组件：


export const CGOIncidentsMapConfig: React.FC = () => {
  const [popupCoordinates, setPopupCoordinates] = useState<number[]>([-0.13235092163085938, 51.518250335096376]);
  const [isPopupVisible, setPopupVisible] = useState<boolean>(false);
  const [popopContainer, setPopupContainer] = useState("");
  const [leyend, setLeyend] = useState<{
    title: string;
    elements: {
      title: string;
      color: string;
    }[];
  }>(LEYENDS.PROVINCES);

  const onZoomMapEvent: MapEvent = (map) => {
    console.log("ZIIIM", map.getZoom());
  };

  const onMouseEnterEvent = (e: MapLayerMouseEvent) => {
    const map = e.target;
    map.getCanvas().style.cursor = "pointer";
  };

  const onMouseLeaveEvent = (e: MapLayerMouseEvent) => {
    const map = e.target;
    map.getCanvas().style.cursor = "";
  };

  const dismissPopup = () => {
    setPopupVisible(false);
    console.log("CIIM");
  };

  const setZoomSuscribers = useSetRecoilState(zoomSuscriberState);
  const setClickSuscribers = useSetRecoilState(clickSuscriberState);

  useEffect(() => {
    setZoomSuscribers((oldZoomSubscribers) => [...oldZoomSubscribers, onZoomMapEvent]);

    setClickSuscribers((oldClickSubscribers) => [...oldClickSubscribers, dismissPopup]);

    console.log("updated recoil");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  console.log(isPopupVisible);

  return (
    <Fragment>
      <Source id={CGO_INCIDENTS_SOURCE_ID} tileJsonSource={CGO_INCIDENTS_SOURCE_OPTIONS} />
      <Layer
        id={CGO_INCIDENTS_LAYER_LAYOUT.id}
        type={CGO_INCIDENTS_LAYER_LAYOUT.type}
        sourceId={CGO_INCIDENTS_LAYER_LAYOUT.source}
        sourceLayer={CGO_INCIDENTS_LAYER_LAYOUT["source-layer"]}
        paint={CGO_INCIDENTS_LAYER_LAYOUT.paint}
        onClick={onClickEvent}
        onMouseEnter={onMouseEnterEvent}
        onMouseLeave={onMouseLeaveEvent}
      />
      {isPopupVisible && (
        <Popup coordinates={popupCoordinates} onClick={dismissPopup}>
          {popopContainer}
        </Popup>
      )}
      <Leyend title={leyend.title} elements={leyend.elements} />
    </Fragment>
  );
};

这是我MapContext创建原子的文件：

import { MapEvent } from "react-mapbox-gl/lib/map-events";
import { atom } from "recoil";

export const zoomSuscriberState = atom<MapEvent[]>({ key: "zoomSuscriberState", default: [] });
export const clickSuscriberState = atom<MapEvent[]>({ key: "clickSuscriberState", default: [] });

如您所见，我想做的只是使用 RecoilJS 为 onClick 和 onZoom 事件创建订阅者模式。我的想法是将每个 Mapbox 层分隔在不同的组件中。

当getEventHandler执行返回的函数时，里面的console.log只显示一个空数组，zoomSuscribers但是clickSuscribers我在Dashboard组件中看到的console.log是两个原子都有一个由组件设置的回调函数CGOIncidentsMapConfig。这些原子在第一次渲染时是空的，Dashboard一旦CGOIncidentsMapConfig组件被渲染就完成了。似乎 RecoilJS 更新了原子和Dashboard组件，正如预期的那样。

为什么函数中的 console.loggetEventHandler只打印一个空数组？因此，订阅者没有正确执行该事件。

提前致谢。

4

2 回答 2

0

那是因为您正在调用该getEventHandle函数而不是将其传递给Map组件。

更改这些行：

onZoom={getEventHandle(zoomSuscribers)}
onClick={getEventHandle(clickSuscribers)}

至

onZoom={() => getEventHandle(zoomSuscribers)}
onClick={() => getEventHandle(clickSuscribers)}
于 2021-05-18T14:37:48.380 回答
0

我解决了！

解决方案是useRecoilCallback：

import React from "react";
import PageTemplate from "../../components/PageTemplate/PageTemplate";

import ReactMapboxGl from "react-mapbox-gl";

import { CGOIncidentsMapConfig } from "./Map/CGOIncidents";
import { zoomSuscriberState, clickSuscriberState } from "../../contexts/MapContext";
import { useRecoilCallback, useRecoilValue } from "recoil";
import { MapEvent } from "react-mapbox-gl/lib/map-events";

const Map = ReactMapboxGl({
  accessToken: process.env.REACT_APP_MAPBOX_TOKEN ?? "",
});

const Dashboard: React.FC = () => {
  const onZoom: MapEvent = useRecoilCallback(({ snapshot }) => async (map, evt) => {
    const subs = await snapshot.getPromise(zoomSuscriberState);
    for (const event of subs) {
      event(map, evt);
    }
  });

  const onClick: MapEvent = useRecoilCallback(({ snapshot }) => async (map, evt) => {
    const subs = await snapshot.getPromise(clickSuscriberState);
    for (const event of subs) {
      event(map, evt);
    }
  });

  return (
    <PageTemplate>
      <Map
        style="mapbox://styles/mapbox/light-v10"
        containerStyle={{
          height: "100%",
          width: "100%",
        }}
        center={[-3.7, 40.44]}
        zoom={[5]}
        onZoom={onZoom}
        onClick={onClick}
      >
        <CGOIncidentsMapConfig />
      </Map>
    </PageTemplate>
  );
};

export default Dashboard;
于 2021-05-19T11:17:34.380 回答