如何修复在使用react-leaflet和Next.js时出现的“窗口未定义”错误？

wdebmtf2 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(260)

我正在使用Leaflet为我的网站生成Map，但它似乎导致了window is not defined错误。
我已经搜索了一段时间，这个问题的原因似乎是传单试图过早加载Map，就像在窗口甚至存在之前，因此出现了错误。
好吧，
我尝试使用next/dynamic从源代码动态导入Map
示例代码：

const Map = useMemo(
    () => dynamic(() => import("@/app/components/Map"), { ssr: false }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [location]
  );

我还尝试使用../components/Map导入而不是@/app/components/Map
另一件提到的事情是使用动态导入OUTISDE作为主函数，它最终看起来像这样

const Map = dynamic(() => import("@/app/components/Map"), { ssr: false });

这不仅没有解决我的问题，它还删除了我使用usememomo的原因，这是为了确保每次位置更改时Map都会更新到该位置。
我尝试的另一件事是使用一个isMounted状态，在其中创建一个useState，将其设置为false，然后使用useEffect将其设置为true
示例：

const [isMounted, setIsMounted] = React.useState(false)

useEffect(() => {
 setIsMounted(true)
}, [])

我会把它放在Map组件中，并且只在isMounted等于true时才呈现，因为我在它之前有一个返回null的函数
示例：

if(!isMounted) return null;

return (
 <Map></Map>
)

我也试过用{ ssr：false }选项，将其删除，使其为true，但没有任何效果。我一直得到这个错误，所以我喜欢一些帮助！

next.js

来源：https://stackoverflow.com/questions/76302468/how-can-i-fix-the-window-is-not-defined-error-while-using-react-leaflet-and-ne

1条答案

按热度按时间

pn9klfpd1#

您需要将动态导入移动到react组件或页面之外，因为这是使用next/dynamic的正确方法。假设你有一个名为location的 prop ，每当你需要你的组件重新渲染时，它就会改变，那么你可以这样做：

const Map = dynamic(() => import("@/app/components/Map"), { 
  ssr: false,
});

interface Props {
  location: string;
}

export default function OtherComponent({ location }: Props): JSX.Element {
  // Since you want your component to re-render each time the location prop
  // changes, we pass the `key` prop to the component. This will force the
  // component to re-render.
  return <Map key={location} />;
}

export type { Props as OtherComponentProps };

顺便说一下，您遇到window is not defined错误是因为第三方组件试图访问服务器上不可用的Window API。

赞(0）回复(0）举报 2023-05-28

我来回答

如何修复在使用react-leaflet和Next.js时出现的“窗口未定义”错误？

1条答案

相关问题

热门标签

最新问答