React接入Kakao地图时报Cannot read property 'maps' of undefined如何解决

问题根因 #

• 你在组件顶层直接解构window.kakao，组件初次渲染时若Kakao地图SDK尚未完成加载，window.kakao本身为undefined，自然会触发读取maps属性失败的报错，和useEffect的空依赖配置无关
• getElementsByClassName返回的是HTMLCollection类型的DOM集合，不是单个DOM节点，直接传入Map构造器也会导致地图初始化失败

修复方案 #

1. 将window.kakao的读取逻辑移到useEffect内部，执行地图初始化前先判断window.kakao是否存在；如果你是通过异步方式加载Kakao SDK，可以增加加载状态判断，或短轮询等待SDK加载完成再执行初始化
2. 使用React ref绑定地图容器节点，替代原生DOM选择器，更符合React的写法，也能避免DOM未渲染完成找不到节点的问题
3. 注意给地图容器设置明确的宽高，否则地图会因为容器尺寸为0无法正常渲染

修正后代码 #

import React, { useEffect, useRef } from 'react';
const Restaurant_result = () => {
  // 用ref绑定地图容器
  const mapRef = useRef(null);

  useEffect(() => {
    // 先判断kakao是否加载完成，且ref绑定了DOM节点
    if (!window.kakao || !mapRef.current) return;
    
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3
    };
    const map = new window.kakao.maps.Map(mapRef.current, options);
  }, []);

  return (
    <div>
      {/* 给地图容器绑定ref，同时设置宽高 */}
      <div ref={mapRef} className='myMap' style={{ width: '100%', height: '400px' }}/>
    </div>
  );
};

export default Restaurant_result;

内容的提问来源于stack exchange，提问作者Lee