@react-google-maps/api Autocomplete组件onPlaceChanged返回undefined问题

问题根源 #

你的代码存在两个核心问题：

• Autocomplete组件的onPlaceChanged回调不会直接传入place对象，需要通过组件实例调用getPlace()方法获取。
• useState是异步更新的，在onPlaceChanged里直接打印searchResult会拿到更新前的值。

修正后的代码 #

import React, { useState, useRef, useEffect } from 'react';
import { Autocomplete, useLoadScript } from '@react-google-maps/api';

const placesLibrary = ['places'];

function App() {
  const [searchResult, setSearchResult] = useState(null);
  const autocompleteRef = useRef(null);

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: 'GOOGLE_API_KEY',
    libraries: placesLibrary
  });

  // 加载完成后保存Autocomplete实例到ref
  const onLoad = (autocomplete) => {
    autocompleteRef.current = autocomplete;
  };

  const onPlaceChanged = () => {
    // 通过实例获取place对象
    const place = autocompleteRef.current.getPlace();
    setSearchResult(place);
    // 直接打印获取到的place，而不是state（因为state异步更新）
    console.log('当前选中的Place对象:', place);
  };

  // 监听searchResult变化，获取更新后的state
  useEffect(() => {
    if (searchResult) {
      console.log('更新后的searchResult:', searchResult);
    }
  }, [searchResult]);

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return (
    <div className="App">
      <div id="searchColumn">
        <h2>Tide Forecast Options</h2>
        <Autocomplete
          onPlaceChanged={onPlaceChanged}
          onLoad={onLoad}
        >
          <input
            type="text"
            placeholder="Search for Tide Information"
            style={{
              boxSizing: `border-box`,
              border: `1px solid transparent`,
              width: `240px`,
              height: `32px`,
              padding: `0 12px`,
              borderRadius: `3px`,
              boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
              fontSize: `14px`,
              outline: `none`,
              textOverflow: `ellipses`,
            }}
          />
        </Autocomplete>
      </div>
    </div>
  );
}

export default App;

关键修改说明 #

1. onLoad函数：将组件加载后的Autocomplete实例保存到autocompleteRef中，后续用来调用getPlace()。
2. onPlaceChanged回调：不再接收参数，而是通过autocompleteRef.current.getPlace()获取选中的Place对象，这是Google Maps Autocomplete原生API的调用方式，@react-google-maps/api仅做了封装。
3. 异步state处理：直接打印刚获取的place，或者用useEffect监听searchResult的变化，确保拿到更新后的state值。

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