React Native调用Weather API报错：undefined is not an object 如何修复？

问题根源 #

1. 数据未就绪就访问：你在组件初始化阶段直接计算sunrise，但此时API请求还未返回数据，存储天气数据的address（代码里误写为weather）仍为初始值，访问weather.sys.sunrise自然会触发undefined错误。
2. 变量名不匹配：API返回的数据存在address状态中，但计算时误用了不存在的weather变量，属于笔误。
3. API请求未触发：getAddressData函数仅定义未调用，数据根本没开始加载。

修复方案 #

步骤1：修正变量名并初始化正确状态 #

将状态初始值设为null，方便明确判断数据是否加载完成，同时把所有错误的weather替换为实际存储数据的address。

步骤2：自动触发API请求 #

使用useEffect钩子在组件挂载时调用getAddressData，确保数据请求自动启动。

步骤3：添加数据加载判断 #

在计算日出时间和渲染时，先检查address是否存在，避免访问未定义的属性。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import { KeyboardAvoidingView, View, Text } from 'react-native';
import axios from 'axios';

export const AddressScreen = () => {
    // 初始设为null，明确区分未加载状态
    const [address, setAddress] = useState(null);

    const baseURL = `${APIKey}`; // 确保APIKey已正确导入或定义
    
    const getAddressData = () => {
        axios.get(baseURL)
            .then(response => setAddress(response.data))
            .catch(error => console.log('API请求错误:', error));
    };

    // 组件挂载后立即请求数据
    useEffect(() => {
        getAddressData();
    }, []);

    // 数据加载完成前显示"加载中"，完成后计算时间
    const sunriseTime = address 
        ? new Date(address.sys.sunrise * 1000).toLocaleTimeString() 
        : '加载中...';

    return (
        <KeyboardAvoidingView>
            {/* 保留你原有的其他组件内容 */}
            <View>
                <Text>Sunrise: {sunriseTime}</Text>
            </View>
        </KeyboardAvoidingView>
    );
};

核心修复点解释 #

• 状态初始化：用null代替空字符串，更清晰判断数据是否加载完成。
• 条件渲染：通过三元表达式，在数据未就绪时显示占位文本，避免报错。
• 自动请求：useEffect依赖空数组，确保组件仅在挂载时触发一次请求。
• 变量名修正：统一使用address访问存储的天气数据，解决笔误问题。

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