React项目中react-places-autocomplete的Google Places API加载位置问题

你遇到的问题很典型——React的虚拟DOM渲染机制和直接插入<script>标签的方式不兼容，所以之前的两种尝试都没生效。下面给你几个靠谱的解决方案：

方法1：直接在public/index.html中加载脚本（最推荐） #

这是最简单且稳定的方式，因为HTML里的<script>标签会在React应用初始化前就加载好Google Places API。

打开你的项目根目录下的public/index.html，在<body>标签的末尾（或者<head>里添加async defer属性）插入脚本：

<!-- 在public/index.html的<body>结束前添加 -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places"></script>
</body>

这样当React应用启动时，Google Maps API已经就绪，react-places-autocomplete就能正常调用了。

方法2：动态加载脚本（适合按需加载场景） #

如果你的组件不是一开始就需要用到地址 autocomplete，可以在组件挂载时动态加载脚本，避免不必要的资源加载：

class My_Component extends React.Component {
  state = {
    apiLoaded: false,
    address: ''
  };

  componentDidMount() {
    // 检查脚本是否已经加载，避免重复加载
    if (!window.google) {
      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places';
      script.async = true;
      script.defer = true;
      // 脚本加载完成后的回调，确保组件能正常使用API
      script.onload = () => {
        this.setState({ apiLoaded: true });
      };
      document.body.appendChild(script);
    } else {
      this.setState({ apiLoaded: true });
    }
  }

  handleChange = (address) => {
    this.setState({ address });
  };

  handleSelect = (address) => {
    // 处理选中地址的逻辑
    this.setState({ address });
  };

  render() {
    // 只有API加载完成后才渲染PlacesAutocomplete组件
    if (!this.state.apiLoaded) {
      return <div>加载中...</div>;
    }

    return (
      <div>
        <PlacesAutocomplete 
          value={this.state.address} 
          onChange={this.handleChange} 
          onSelect={this.handleSelect} 
        >
          {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
            <div>
              <input {...getInputProps({ placeholder: '输入地址...' })} />
              <div>
                {loading && <div>加载建议中...</div>}
                {suggestions.map(suggestion => {
                  const style = {
                    backgroundColor: suggestion.active ? '#41b6e6' : '#fff'
                  };
                  return (
                    <div {...getSuggestionItemProps(suggestion, { style })}>
                      {suggestion.description}
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </PlacesAutocomplete>
      </div>
    );
  }
}

为什么你之前的方法不行？ #

• 在ReactDOM.render里插入<script>标签：React会把这个标签当作普通的DOM元素处理，但虚拟DOM不会执行脚本内容，所以API根本没加载。
• 在组件的render方法里放<script>：每次组件渲染都会创建新的script标签，不仅会重复加载API，而且脚本加载的时机和组件渲染不同步，当PlacesAutocomplete尝试调用API时，脚本可能还没加载完成。

内容的提问来源于stack exchange，提问作者BadProgrammer