reactjs - Gatsby 404 Page 提示谷歌地图

Question

我想知道为什么我的 404 页面与我的 map 发生冲突，即使我的 404 页面上没有 map 。我的 Maps.js 有以下代码:

import React from "react"
import MapMarker from "../assets/images/logos/map-marker.png"

if (typeof window !== 'undefined') {
    window.initMap = function() {
        const map = new window.google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 11.1463554,
            lng: 110.5245996
        },
        zoom: 10,
        styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#d3d3d3"},{"lightness":50}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":50},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#4c4c4c"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#4c4c4c"},{"lightness":17},{"weight":1.2}]}]
      })

      new window.google.maps.Marker({
        position: { lat: 123.1463554, lng: 123.5245996 },
        icon: MapMarker,
        animation: window.google.maps.Animation.BOUNCE,
        map: map
    });
    }
  }

  

const Map = () => {
  return (
    <div id="map-container" data-aos="fade-up">
        <div className="container-fluid">
            <div className="row">
                <div className="col-lg-12 col-12 pl-0 pr-0">
                    <div className="google-map">
                        <div id="map"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Map

我的 /pages/404.js 上有此代码:

import React from "react"
import { Link } from "gatsby"
import ErrorImg from "../assets/images/header/404.png"
import Preloader from "../components/Preloader"
import Layout from "../components/Layout"
import PageBanner from "../components/PageBanner"

const Error = () => {
   return (
      <>
      <Preloader />
      <Layout>
      <PageBanner title="404 Not Found" />
        <div class="blog-section section-padding">
            <div className="container">
                <div className="row">
                    <div className="col-lg-12">
                        <img src={ErrorImg} className="d-block mx-auto" />
                        <h1 className="not-found text-center center-block mt-20">404 Not Found</h1>

                        <p className="text-center mt-20">It seems like you are lost. The page you were looking for doesn't exist, isn't available or was loading incorrectly. <br/>
                            Perhaps you can return back to the homepage and see if you can find what you are looking for. </p>

                            <div className="btn-group mt-30 d-flex justify-content-center align-content-center">
                                <Link data-wipe-normal="GO BACK TO HOMEPAGE" to="/">GO BACK TO HOMEPAGE</Link>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        </Layout>
    </>
   )
}

export default Error

我想知道每当我访问 404 页面时它总是返回这个:

×
Map: Expected mapDiv of type Element but was passed null.
▶ 3 stack frames were collapsed.
./src/components/Map.js.window.initMap
C:/Users/Rean/Desktop/gatsby/src/components/Map.js:6
  3 | 
  4 | if (typeof window !== 'undefined') {
  5 |   window.initMap = function() {
> 6 |       const map = new window.google.maps.Map(document.getElementById('map'), {
  7 |       center: {
  8 |           lat: 15.1463554,
  9 |           lng: 120.5245996

知道是什么原因造成的以及如何解决吗？一直在这个问题上徘徊了几次。请帮忙

Answer 1

这是因为您永远不会卸载您的 Map组件，当您导航到另一个页面时(无论是 404，它都会发生在每个人身上)它在提示该行。因为所有组件共享路由，并且您的 map 代码不会在组件内呈现，所以在处置组件时它永远不会被卸载。
在问题中，您的代码中有一些内容。您是直接攻击 DOM，但是，您使用 React 的原因是生成一个虚拟 DOM 以避免这种高性能操作。与 jQuery 一样，真实的 DOM 操作对 Web 性能有很大的影响。您可以使用一些钩子(Hook)来获得相同的结果。
将您的 Map 组件更改为如下所示:

import React, {useRef, useEffect} from "react"
import MapMarker from "../assets/images/logos/map-marker.png"

const Map = () => {
 const map=useRef(null);

  useEffect(()=>{

    if(typeof window !== "undefined"){
      window.initMap = function() {
   const map = new window.google.maps.Map(map.current, {
        center: {
            lat: 11.1463554,
            lng: 110.5245996
        },
        zoom: 10,
        styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#d3d3d3"},{"lightness":50}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":50},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#4c4c4c"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#4c4c4c"},{"lightness":17},{"weight":1.2}]}]
      })

      new window.google.maps.Marker({
        position: { lat: 15.1463554, lng: 120.5245996 },
        icon: MapMarker,
        animation: window.google.maps.Animation.BOUNCE,
        map: map
    });
      }

    }

    return () => map.current=null; // change it to map = null if don't work

  }, [])
  


  return (
    <div id="map-container" data-aos="fade-up">
        <div className="container-fluid">
            <div className="row">
                <div className="col-lg-12 col-12 pl-0 pr-0">
                    <div className="google-map">
                        <div id="map" ref="map"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Map

注意:如果没有沙箱，很难猜测代码的行为方式，但这是要遵循的方向。
使用 useRef 钩子(Hook)并应用有效的引用，您可以复制与 document.getElementbyId 相同的行为没有指向真正的 DOM。您的对象在 map.current 内(因为引用名称是 map )。初始设置为 null以避免可能在应用程序中记住有关 React 补液的引用。 useRef钩子(Hook)应用 useEffect 有空 deps ( [])。 useEffect具有空依赖项的，将在加载 DOM 树后触发，这样可以确保在您请求它的那一刻创建您的引用。 useEffect 末尾的 return 语句将在组件自动卸载时触发，因此此时您必须将引用设置回 null