Question

我在React应用中使用谷歌地图自动完成功能，但我在componentwillUnmount生命周期事件中遇到错误：

this.autocomplete.removeListener不是函数

当我回到组件时，我收到以下错误：

您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

使用devtools检查页面元素时，似乎包含https://maps.googleapis.com/maps-api-v3/api/js/ *的多个脚本标记被添加到html页面的头部。

如果我在ComponentWillUnmount中注释掉this.autocomplete.removeListener('place_changed')，则会删除正文中的脚本标记但仍保留所有头部脚本标记。如果我取消注释相同的行，那么我附加在组件装载生命周期上的偶数主体脚本标记仍然存在，并且创建了一个新的标记。

 componentDidMount () {
    this.script = document.createElement('script')
    this.script.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&libraries=places`
    this.script.async = 1
    this.script.defer = 1
    this.script.onload = () => this.initAutocomplete()
    this.script.onerror = () => this.initAuthcompleteFailed()

    document.body.appendChild(this.script)
  }

  componentWillUnmount () {
    this.autocomplete.removeListener('place_changed')
    // google.maps.event.clearInstanceListeners(this.autocomplete)
    // console.log('THIS SCRIPT: ', this.script)
    document.body.removeChild(this.script)
  }

  initAutocomplete () {
    console.log('Google Maps Loaded')
    this.autocomplete = new google.maps.places.Autocomplete(this._input.input, {types: ['geocode']})
    this.autocomplete.addListener('place_changed', this.handlePlaceChanged)
    this.geolocate()
  }

  initAuthcompleteFailed () {
      console.log('Google Maps Loadeding Error')
  }

无法从React App中的UnMount页面中删除Google地图自动填充库脚本

0 个答案: