在使用router 切换时,发生了Uncaught (in promise) TypeError: Cannot read property 'setterMap' of null错误

[susanforme]

• 我已经搜索过 issue，没有类似的问题，或者类似的问题仍然没有解决方案。
• 我已经搜索过文档，并且仍然没有找到解决方案。
• 我写了个问题重现的例子，链接或者代码将会贴在下面。

Reproduce Example Link or Code Fragment

该组件位于 路由中

const MyMap: React.FC<MyMapProps> = ({ position, onClick }) => {
  const [ranging, setRanging] = useState(false);
  const [rule, setRule] = useState<any>({});
  const style = useStyles();
  const plugins: any = [
    'Scale',
    'OverView',
    // v1.1.0 新增
    'ControlBar',
    'ToolBar',
  ];
  const events = {
    click: (map: any) => {
      onClick(map);
    },
    created(instance: any) {
      window.AMap.plugin(['AMap.RangingTool'], () => {
        const rule = new window.AMap.RangingTool(instance, getMapPlugins());
        setRule(rule);
      });
    },
  };
  useEffect(() => {
    if (!rule.turnOn) {
      return;
    }
    if (ranging) {
      rule.turnOn();
    } else {
      rule.turnOff();
    }
  }, [rule, ranging]);
  return (
    <Map
      viewMode="3D"
      zoom={15}
      plugins={plugins}
      loading={
        <div className={style.loadingFather}>
          <Spin tip="加载中" size="large" />
        </div>
      }
      center={position}
      events={events}
    >
      <Marker position={position} draggable visible={!ranging} />
      <div className={style.customLayer}>
        <Button title="开启测距" onClick={() => setRanging(true)}>
          开启测距
        </Button>
        <Button title="关闭测距" onClick={() => setRanging(false)}>
          结束测距
        </Button>
      </div>
    </Map>
  );
};

export default MyMap;

What is actually happening?

在切换组件的时候发生了如下错误