React onClick事件触发后组件不渲染，google-map-react点击图标弹窗不显示

算力阿峰

2026-10-21

问题根本原因

你使用普通变量currentToolTip存储弹窗显示状态，React无法监听普通变量的变更，因此修改该变量后不会触发组件重新渲染，UI不会同步更新，导致弹窗无法显示。

解决方案

用React的useState Hook声明弹窗状态变量，状态变更会自动触发组件重渲染
调整状态更新逻辑，通过状态setter函数修改显示值
给Tooltip组件添加足够高的z-index，避免被地图图层遮挡

修正后代码示例

import { useState } from 'react';

// 弹窗组件增加基础样式避免透明/被遮挡
const ToolTip = ({name, address, info}) => <div style={{
  zIndex: 999,
  background: '#ffffff',
  padding: '10px',
  borderRadius: '6px',
  boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
}}>
  <h1>{name}</h1>
  <h2>{address}</h2>
  <p>{info}</p>
</div>;

// 用useState声明状态
const [currentToolTip, setCurrentToolTip] = useState("");

const showToolTip = (name) =>  {
  setCurrentToolTip(name);
  console.log(name);
};

const directory = places.map((data) => {
  if ((data.category === ButtonTitle.CampusSeeking) && data.deptMarker === "")
    return (
      <div lat={data.latitude} lng={data.longitude}>
        <Pin
          lat={data.latitude}
          lng={data.longitude}
          color={blue} 
          height="25px"
          width="25px"
          onClick={() => showToolTip(data.name)}
        />
        {currentToolTip === data.name && (
          <ToolTip
            lat={data.latitude}
            lng={data.longitude}
            name={data.name}
            address={data.address}
            info={data.info}
          />
        )}
      </div>
    );
// 原有剩余逻辑保持不变
});

return (         
  {loc === ButtonTitle.CampusSeeking && directory} 
);