关于在不同页面使用地图时<APILoader>的问题

[rubickkcibur]

目前搭建的一个项目中需要分别在两个不同的页面使用Map组件，请问这时应该怎么使用APILoader？参考说明中只给了一个页面下的使用方法。
项目框架：react+typescript+next.js

[rubickkcibur]

又测试了下，发现只在一个页面使用也是有问题的，初次加载能够正常显示，但刷新一下就会出问题，报错信息

页面代码如下：
export default function HeatMap(){
return(
MainLayout
div style={{ height: '950px' }}
APILoader akay="c640403f7b166ffb3490f7d2d4ab954c"
Map center={[116.397428, 39.90923]} zoom={13}
Map
APILoader
div
MainLayout
)
}
盼望解答，感激不尽

[jaywcjlove]

@rubickkcibur 可以给我哥实例，你这个是服务端渲染的问题。服务端是没有 windows 和document 对象

[jaywcjlove]

@rubickkcibur Upgrade + @uiw/[email protected]

[rubickkcibur]

我更新了本地版本还是存在同样的问题，项目有点大，可以的话麻烦您看下https://github.com/rubickkcibur/cdc，地图使用在fe/src/pages/addroute,万分感谢！

[jaywcjlove]

@rubickkcibur 我都不知道你这个怎么跑起来

[rubickkcibur]

@rubickkcibur 我都不知道你这个怎么跑起来

不好意思，cd fe然后yarn next

[jaywcjlove]

@rubickkcibur 你使用的是 next.js 前面没有时间看， 可能下面具有参考意见。

uiwjs/react-md-editor#52

[jaywcjlove]

@rubickkcibur https://codesandbox.io/s/nextjs-example-react-codemirror-bimq7?file=/pages/index.js

uiwjs/react-codemirror#57

参考实例：

import { useEffect, useState } from "react";
import Link from "next/link";

function HomePage() {
  const [comp, setComp] = useState();
  useEffect(() => {
    if (window) {
      import("@uiw/react-codemirror").then((obj) => {
        if (!comp) {
          setComp(obj.default);
        }
      });
    }
  }, []);

  const Comps = comp;
  return (
    <div>
      <div>
        Welcome to Next.js!
        <Link href="/about">
          <a>About</a>
        </Link>
      </div>
      {Comps && (
        <Comps
          value="const a = 0;"
          options={{
            mode: "jsx"
          }}
        />
      )}
    </div>
  );
}

export default HomePage;