React Native天气应用启动时OpenWeatherMap API加载异常引发报错

问题描述 #

首次启动App时，WeatherScreen组件抛出"Cannot read property 'name'"错误；移除该组件中读取name属性的代码后，应用刷新可正常运行。需要解决启动时的报错问题，确保应用首次启动即可正常运行。

问题原因 #

1. 状态初始化缺失：weatherData和dataLoaded初始值均为undefined，首次渲染时dataLoaded == false的判断不成立，导致直接渲染WeatherScreen并传入未初始化的weatherData。
2. 无防御性读取：WeatherScreen中直接解构weatherData.name，当weatherData为undefined时，触发属性读取错误。
3. 异步逻辑混乱：原fetchWeatherDara函数中，逆地理编码代码依赖异步更新的dataLoaded状态，且未包裹在try块内，存在异常风险。

解决方案 #

1. 修正状态初始值

在App.js中为状态设置合理初始值，确保首次渲染进入加载状态：

// App.js
const [weatherData, setWeatherData] = useState(null);
const [dataLoaded, setDataLoaded] = useState(false); // 初始设为false，保证首次显示loading

2. 完善渲染条件判断

在App.js中同时校验加载状态和数据是否存在，确保只有数据就绪时才渲染WeatherScreen：

// App.js 渲染部分
if (!dataLoaded || !weatherData) {
  return (
    <View style={styles.container}>
      <Text>Loading....</Text>
    </View>
  );
}

return (
  <View style={styles.container}>
    <WeatherScreen weatherData={weatherData} />
  </View>
);

3. 在WeatherScreen中添加防御性处理

使用可选链操作符?.避免读取undefined属性的错误，同时提供默认文本：

// WeatherScreen.js
const WeatherScreen = ({ weatherData }) => {
  const name = weatherData?.name;
  const timezone = weatherData?.timezone;

  return (
    <View>
      <Text>{name || '加载中...'}</Text>
    </View>
  );
};

4. 修复fetchWeatherDara函数的异步逻辑

将逆地理编码操作移到天气数据获取成功的代码块中，确保依赖数据已存在，同时处理异常情况：

// App.js 中的fetchWeatherDara函数
const fetchWeatherDara = async () => {
  try {
    setDataLoaded(false);
    const response = await fetch("https://api.openweathermap.org/data/2.5/weather?lat=44.34&lon=10.99&appid=key");
    if (response.status === 200) {
      const data = await response.json();
      setWeatherData(data);
      // 获取到天气数据后再执行逆地理编码
      const reverseAddress = await Location.reverseGeocodeAsync({
        longitude: data.coord.lon,
        latitude: data.coord.lat
      });
      setCity(reverseAddress[0].city);
    } else {
      console.error('获取天气数据失败，状态码:', response.status);
    }
    setDataLoaded(true);
  } catch (error) {
    console.error('请求出错:', error);
    setDataLoaded(true); // 出错后更新加载状态，避免一直停留在loading
  }
};

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