React组件变量导出问题：无法获取经纬度供天气API使用

在React里，子组件向父组件传递数据的标准方式是通过props传递回调函数，你可以按照以下步骤修改代码：

1. 修改子组件PlaceComponent，接收回调props #

给组件添加props参数，并在获取到位置信息后调用回调函数传递数据：

import React, { useRef } from "react";
import { StandaloneSearchBox, useJsApiLoader } from "@react-google-maps/api";

const libraries = ['places'];
// 接收父组件传递的回调函数props
const PlaceComponent = ({ onLocationSelect }) => {
  const inputRef = useRef();

  const { isLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_API_GOOGLE_KEY,
    libraries
  });

  // 处理加载错误
  if (loadError) {
    return <div>地图服务加载失败，请检查API密钥</div>;
  }

  const handlePlaceChanged = () => { 
    const [ place ] = inputRef.current.getPlaces();
    if(place && onLocationSelect) { 
      const locationData = {
        address: place.formatted_address,
        lat: place.geometry.location.lat(),
        lng: place.geometry.location.lng()
      };
      // 调用父组件传来的回调，传递数据
      onLocationSelect(locationData);
    } 
  }

  return (
    isLoaded && (
      <StandaloneSearchBox
        onLoad={ref => inputRef.current = ref}
        onPlacesChanged={handlePlaceChanged}
      >
        <input
          type="text"
          className="form-control"
          placeholder="Enter Location"
        />
      </StandaloneSearchBox>
    )
  );
};

export default PlaceComponent;

2. 在父组件中使用PlaceComponent，接收传递的数据 #

父组件通过传入onLocationSelect回调函数，拿到子组件传递的地址和经纬度：

import React, { useState } from "react";
import PlaceComponent from "./PlaceComponent";

const WeatherApp = () => {
  // 用state存储位置数据
  const [location, setLocation] = useState(null);

  const handleLocationSelect = (locationData) => {
    // 这里可以拿到子组件传来的地址、经纬度，用于调用天气API
    setLocation(locationData);
    console.log("从子组件拿到的数据:", locationData);
    // 这里写调用天气API的逻辑
  };

  return (
    <div>
      <h1>天气应用</h1>
      <PlaceComponent onLocationSelect={handleLocationSelect} />
      {location && (
        <div className="mt-3">
          <p>选择的地址: {location.address}</p>
          <p>纬度: {location.lat}</p>
          <p>经度: {location.lng}</p>
        </div>
      )}
    </div>
  );
};

export default WeatherApp;

关键说明 #

• 子组件通过props接收父组件的回调函数，当获取到位置信息时主动调用这个函数，把数据作为参数传过去。
• 父组件通过useState存储这些数据，后续就可以用这些经纬度去调用天气API了。
• 新增了loadError的处理，避免组件加载失败时无提示。

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