React Native渲染Fetch API数据时出现未定义属性读取错误求助

核心问题 #

1. 初始状态类型不匹配：你把exRates的初始值设为数组[]，但CoinGecko API返回的是对象（包含rates子对象）。第一次渲染时exRates是数组，exRates.rates直接是undefined，访问.aud就会抛出TypeError，导致组件直接崩溃，后续的loadData异步操作也被中断——这就是保留<Text>{exRates.rates.aud}</Text>时控制台看不到API日志的原因。
2. 未处理异步数据加载的渲染时机：React组件会先完成初始渲染，再执行useEffect里的异步逻辑。第一次渲染时数据还没加载完成，直接访问深层属性必然报错。
3. 渲染两次的原因：这是React开发环境下Strict Mode的特性，会强制组件渲染两次，用来检测潜在的副作用问题，生产环境不会出现这个情况。

修复代码 #

export const TestScreen = () => {
    // 把初始值改成null，匹配API返回的对象类型
    const [exRates, setExRates] = useState(null);
    const [loading, setLoading] = useState(true)

    const loadData = async () => {
        try {
            const res = await fetch(
                "https://api.coingecko.com/api/v3/exchange_rates"
            );
            const data = await res.json();
            console.log("This is the API Call");
            setExRates(data);
        } catch (err) {
            console.error("数据加载失败:", err);
        } finally {
            // 无论成功失败都结束loading状态
            setLoading(false);
        }
    }

    useEffect(() => {
        loadData();
    }, []);

    // 加载中时显示占位内容
    if (loading) {
        return <View><Text>加载中...</Text></View>;
    }

    // 数据加载完成后再渲染，用可选链处理可能的空值
    return (
        <View>
            <Text>Hello </Text>
            {console.log("I am in the return section of the code")}
            {console.log(exRates)}
            <Text>{exRates?.rates?.aud?.name || "暂无数据"}</Text>
        </View>
    );
};

关键修复点 #

• 修正初始状态：将useState([])改为useState(null)，避免数组类型和API返回的对象类型不匹配导致的属性访问错误。
• loading状态控制：利用loading状态在数据加载完成前渲染占位内容，避免直接访问未加载的数据。
• 可选链操作符：使用?.语法（exRates?.rates?.aud?.name），即使某个层级的属性为undefined也不会抛出错误，同时设置默认值提升用户体验。
• 错误处理：添加try/catch捕获API请求可能出现的错误，避免组件因网络问题崩溃。

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