使用OpenWeatherMap API遇TypeError：无法读取undefined的lat属性求助

核心问题 #

你遇到的TypeError主要来自三个点：

1. 顶层定义的url在组件初始化时，inputData是undefined，直接访问inputData.lat会抛出异常
2. 获取地理坐标的getInputData执行完成后，没有自动触发天气数据的获取，导致apiData一直为undefined，子组件访问其属性时报错
3. 子组件未处理apiData为空的情况，直接访问属性引发错误

具体修复步骤 #

1. 修正天气API地址的生成逻辑

不要在组件顶层直接定义url，而是放到getApiData内部，确保只有拿到有效坐标后才生成合法地址：

const getApiData = async () => {
  // 先判断是否有可用的经纬度数据
  if (!inputData?.lat || !inputData?.lon) return;
  
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${inputData.lat}&lon=${inputData.lon}&appid=${API__KEY}&units=imperial`;
  const res = await fetch(url);
  const jsonRes = await res.json();
  setApiData(jsonRes);
};

2. 自动触发天气数据获取

添加一个监听inputData变化的useEffect，当地理坐标数据加载完成后，自动调用getApiData：

// 初始化加载地理坐标
useEffect(() => {
  getInputData();
}, []);

// 当坐标更新时，自动获取天气数据
useEffect(() => {
  if (inputData?.lat && inputData?.lon) {
    getApiData();
  }
}, [inputData]);

3. 处理子组件的空数据场景

有两种方式可选：

• 父组件条件渲染：只在apiData存在时渲染子组件

return (
  <div className="container">
    <Title />
    <Search
      location={location}
      setLocation={setLocation}
      getInputData={getInputData}
      getApiData={getApiData}
    />
    {apiData && <Pinpoint apiData={apiData} />}
    {apiData && <ForecastPreview apiData={apiData} />}
    {apiData && <ForecastDetails apiData={apiData} />}
  </div>
);

• 子组件内部兼容：使用可选链操作符?.访问属性，避免空值报错

// 示例子组件代码
function Pinpoint({ apiData }) {
  return (
    <div>
      <h3>{apiData?.name || '加载中...'}</h3>
      <p>温度: {apiData?.main?.temp || '--'}°F</p>
    </div>
  );
}

4. 优化初始状态（可选）

给inputData和apiData设置初始空对象，减少undefined相关的潜在问题：

const [inputData, setInputData] = useState({});
const [apiData, setApiData] = useState({});

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