没有自定义库的React中的谷歌地图:无法读取null的属性setState

在没有自定义库的React中，使用谷歌地图时遇到无法读取null的属性setState的错误，这是因为在组件的生命周期中，setState方法只能在组件已经被挂载到DOM中后才能被调用。如果在组件挂载之前调用setState方法，会导致无法读取null的属性的错误。

解决这个问题的方法是在组件的生命周期方法中调用setState方法。一种常见的做法是在组件的componentDidMount方法中调用setState方法，因为该方法会在组件挂载完成后立即被调用。

以下是一个示例代码，展示了如何在React中使用谷歌地图，并在组件挂载完成后调用setState方法：

import React, { Component } from 'react';

class GoogleMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: null
    };
  }

  componentDidMount() {
    // 在组件挂载完成后调用setState方法
    this.setState({
      map: new window.google.maps.Map(this.mapRef, {
        center: { lat: 37.7749, lng: -122.4194 },
        zoom: 8
      })
    });
  }

  render() {
    return (
      <div ref={ref => (this.mapRef = ref)} style={{ width: '100%', height: '400px' }}></div>
    );
  }
}

export default GoogleMap;

在上面的代码中，我们在组件的constructor方法中初始化了map属性为null。然后，在componentDidMount方法中，通过调用setState方法来更新map属性为一个新的谷歌地图实例。最后，在render方法中，我们使用ref属性将一个div元素与this.mapRef关联起来，这样谷歌地图就可以正确地显示在页面上。

需要注意的是，上述代码中使用了window.google对象来访问谷歌地图的API。这是因为谷歌地图的API是通过在全局作用域中定义的，而不是作为React的依赖库引入的。因此，我们需要通过window对象来访问谷歌地图的API。