React Native调用Dota Stratz API失败：undefined is not a function错误排查

错误根源及修复方案 #

1. 自定义Hook未返回状态值 #

你的useApiHero钩子没有返回任何数据，导致在Main组件中解构{data}时得到undefined，调用undefined.map()直接触发“undefined is not a function”错误。

修复useApiHero，补充返回状态的代码：

import { useState, useEffect } from 'react';

export const useApiHero = () => {
    const [data, setData] = useState(null); // 改为null，因为API返回单个对象而非数组
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                // 注意：原地址是文档页，实际API地址需替换为api.stratz.com
                const response = await fetch("https://api.stratz.com/api/v1/Player/1144302439")
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status}`);
                }
                const json = await response.json();
                setData(json);
            } catch (error) {
                setError(error.message);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    // 必须返回状态对象，供组件使用
    return { data, loading, error };
}

2. API返回单个对象而非数组 #

Stratz API返回的是单个玩家的对象数据，不是数组，因此不能使用map方法遍历。同时需要处理加载中和错误状态，避免空值报错。

3. Main组件未返回JSX #

你的Main组件没有返回任何JSX元素，需将渲染内容用return包裹，并完善状态分支：

修复后的Main组件：

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
  
import useApiHero from '../api/ApiHero';

export const Main = () => {
    const { data, loading, error } = useApiHero();

    // 加载中状态
    if (loading) {
        return (
            <View style={styles.container}>
                <ActivityIndicator size="large" color="#fff" />
            </View>
        );
    }

    // 错误状态
    if (error) {
        return (
            <View style={styles.container}>
                <Text style={styles.errorText}>加载失败: {error}</Text>
            </View>
        );
    }

    // 数据正常时渲染
    return (
        <View style={styles.container}>    
            <Text style={styles.text}>CaptainJackID: {data.identity.captainJackIdentityId}</Text>
            {data.identity.playerName && <Text style={styles.text}>玩家昵称: {data.identity.playerName}</Text>}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#222',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
    },
    text: {
        color: '#fff',
        fontSize: 16,
        marginVertical: 8,
    },
    errorText: {
        color: '#ff4444',
        fontSize: 16,
        textAlign: 'center',
    },
});

额外提醒 #

• 务必替换API地址：原代码使用的是文档页面地址，实际请求需用api.stratz.com域名，否则会返回HTML而非JSON，导致解析失败。
• 初始状态优化：因为返回的是单个对象，将data初始值设为null比空数组更合理，避免不必要的类型判断混乱。

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