Reactjs 映射容器已初始化如何修复？

映射容器已初始化

如何修复？我本想把一个函数传递给useEffect，它会清理mapId，但后来我发现Map容器没有找到，我还试图通过ref修复它，但没有成功

export const Map: FC = () => {
  const [id, setId] = useState<string | null>('map');

  const mapRef = useRef(null);
  const coor = useStore($initialCoor);
  const resultCoor = useStore($resultCoor);

  const variate = resultCoor || coor;

  useEffect(() => {
    if (variate) {
      DG.then(() => {
        const map = DG.map(id, {
          center: [variate.lat, variate.lon],
          zoom: 22,
          fullscreenControl: false,
        });

        const icon = DG.icon({
          iconUrl: images.placeMarkActive,
          iconSize: [62, 78],
        });
        DG.marker([variate.lat, variate.lon], { icon, draggable: true }).addTo(
          map,
        );
      });
    }
    return () => setId(null);
  }, [coords, id, searchedCoords, variate, variate.lat, variate.lon]);

  return <Container ref={mapRef} id="map" />;
};

const Container = styled.div`
  height: 100%;
`;

导出常量映射：FC=（）=>{
const[id，setId]=useState（'map'）；
const mapRef=useRef（null）；
const coor=useStore（$initialCoor）；
const resultcor=useStore（$resultcor）；
常量变量=结果或| | coor；
useffect（（）=>{
if（变量）{
DG.then（（）=>{
常量映射=DG.map（id{
中心：[variate.lat，variate.lon]，
缩放：22，
全屏控制：错误，
});
常量图标=DG.icon({
iconUrl:images.placeMarkActive，
iconSize:[62,78]，
});
标记（[variate.lat，variate.lon]，{icon，draggable:true}）.addTo(
地图，
);
});
}
return（）=>setId（null）；
}，[coords，id，searchedCoords，variate，variate.lat，variate.lon]；
返回；
};
const Container=styled.div`
身高：100%；
`;

当用户在卡中输入新地址时，我会收到一个错误，我如何清理卡