使用 Places API 收到此错误“未捕获（承诺中）类型错误：无法读取未定义的属性（读取“fE”）”

Question

当我尝试使用 Places API 在 React 和 ts 中自动完成地址时遇到问题。当我再次运行该项目时，地址自动完成功能确实正确填写了地址表单，但是当我实际停留在该页面上并在新地址之后选择新地址然后刷新时，我开始收到类似标题中提到的类型错误以及此错误

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

以下代码导致错误：

  const [isGoogleMapsLoaded, setGoogleMapsLoaded] = useState(false);

  useEffect(() => {
    if (
      document.querySelector(
        'script[src*="https://maps.googleapis.com/maps/api/js"]'
      )
    ) {
      return;
    }

    const script = document.createElement("script");
    script.src = `https://maps.googleapis.com/maps/api/js?key=${
      import.meta.env.VITE_GOOGLE_MAP_IMBED_API_KEY
    }&libraries=places&callback=initMap`;
    script.async = true;
    window.initMap = () => setGoogleMapsLoaded(true);
    document.body.appendChild(script);
  }, []);

  const autocompleteInputRef = useRef(null);

  useEffect(() => {
    (async () => {
      if (!isGoogleMapsLoaded) return;

      try {
        const googleMaps = await loadGoogleMapsApi({
          key: import.meta.env.VITE_GOOGLE_MAP_IMBED_API_KEY,
          libraries: ["places"],
        });

        if (
          !window.google ||
          !window.google.maps ||
          !window.google.maps.places
        ) {
          return;
        }

        if (!autocompleteInputRef.current) return;

        const autocomplete = new googleMaps.places.Autocomplete(
          autocompleteInputRef.current,
          {
            types: ["address"],
            componentRestrictions: { country: "us" },
          }
        );
        console.log(autocomplete);

        autocomplete.addListener("place_changed", () => {
          const place = autocomplete.getPlace();
          if (!place || !place.address_components) return;

          const streetAddress1Component = place.address_components.find(
            (component) => component.types.includes("street_number")
          );
          const streetAddress2Component = place.address_components.find(
            (component) => component.types.includes("route")
          );
          const cityComponent = place.address_components.find((component) =>
            component.types.includes("locality")
          );
          const stateComponent = place.address_components.find((component) =>
            component.types.includes("administrative_area_level_1")
          );
          const zipCodeComponent = place.address_components.find((component) =>
            component.types.includes("postal_code")
          );

          if (
            !streetAddress1Component ||
            !streetAddress2Component ||
            !cityComponent ||
            !stateComponent ||
            !zipCodeComponent
          ) {
            // Fallback mechanism to parse the full address
            const fullAddress = place.formatted_address
              ? place.formatted_address.split(", ")
              : [];
            setFormData({
              ...formData,
              streetAddress1: fullAddress[0] || "",
              city: fullAddress[1] || "",
              state: fullAddress[2]?.split(" ")[0] || "",
              zipCode: fullAddress[2]?.split(" ")[1] || "",
            });
          } else {
            const streetAddress1 = streetAddress1Component.long_name;
            const streetAddress2 = streetAddress2Component.long_name;
            const city = cityComponent.long_name;
            const state = stateComponent.short_name;
            const zipCode = zipCodeComponent.long_name;

            setFormData({
              ...formData,
              streetAddress1: `${streetAddress1} ${streetAddress2}`,
              city,
              state,
              zipCode,
            });
          }
        });
      } catch (error) {
        console.error(error);
      }
    })();
  }, [isGoogleMapsLoaded]);

就像我用当前代码所说的那样，有时它确实可以正常工作，但有时它会开始给我 TypeError，然后完全停止工作。

Answer 1

在您的 React 应用程序中多次加载 Google Maps Api 会导致此错误...

请确保正确遵循文档和最佳实践 https://developers.google.com/maps/documentation/javascript/overview