带有 RecoilJS (React) 的订阅者模式

问题描述

我正在使用 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 的空数组，但是我看到的 console.log 到 { {1}} 组件是两个原子都有一个由 Dashboard 组件设置的回调函数。这些原子在 CGOIncidentsMapConfig 的第一次渲染时为空，并在 Dashboard 组件渲染后完成。似乎 RecoilJS 更新了原子和 CGOIncidentsMapConfig 组件，正如预期的那样。

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

提前致谢。

解决方法

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

更改这些行：

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

到

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

,

我解决了！

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;