React+Ant design Pro+react-BMapGL开发

问题遇到的现象和发生背景

Uncaught TypeError: Cannot set properties of undefined (setting 'map')
React+Ant design Pro+react-BMapGL开发

问题相关代码，请勿粘贴截图

return (
    <PageContainer>
      <Card>
        <div
          id="container"
          style={{
            width: '1278px',
            height: '580px',
            margin: '-24px',
          }}
        >
          <Map
            ref={(ref) => {
              this.map = ref.map;
            }}
            center={{ lng, lat }}
            zoom="18"
            ScrollWheelZoom="true"
            enableScrollWheelZoom="false"
            style={{ height: '100%' }}
          >
            <MapTypeControl />
            <Marker
              position={new BMapGL.Point(lng, lat)}
              enableDragging
              icon={icon1}
              onClick={() => {
                console.log(1);
              }}
            />
            <NavigationControl anchor={BMAP_ANCHOR_BOTTOM_RIGHT} />
            <InfoWindow position={{ lng, lat }} text="机器类型：" title="92610090000" />
          Map>
        div>
      Card>
    PageContainer>
  );

运行结果及报错内容

报错内容：Uncaught TypeError: Cannot set properties of undefined (setting 'map')

我想要达到的结果

我想要在useEffect里监听地图缩放事件，所以要获取地图实例，但是在官网的写法

map 未定义 。你需要在 state里定义一下map

函数组件没有this，要获取组件实例得用 useRef

用ref存一下