React Native中API数据可打印但无法在FlatList显示的问题

核心问题 #

1. FlatList数据源错误：你将data状态设为API返回的response.data，但FlatList中写的是data={data.data}——如果API返回的直接是数组，data.data会是undefined，导致FlatList无数据可渲染。
2. renderItem参数解构错误：renderItem的回调参数是包含item属性的对象，而非直接的列表项，直接用item会无法正确访问clinic_name等字段。

修复后的代码 #

const HealthLinkMain = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(API_URL, {
                    headers: {
                        Authorization: `Bearer ${TOKEN}`,
                    },
                });
                // 确认response.data是数组，直接赋值给data状态
                setData(response.data)
            } catch (error) {
                console.error(error);
            }
        };

        fetchData();
    }, []);

    return (
        <View style={styles.container}>
            <Text>Test</Text>
            <FlatList
                // 直接使用data状态作为数据源
                data={data}
                // 解构获取item对象
                renderItem={({item}) => (
                    <View>
                        <Text>{item.clinic_name}</Text>
                        <Text>{item.clinic_address}</Text>
                    </View>
                )}
                // 如果clinic_name不唯一，建议用item的唯一ID或index
                keyExtractor={(item, index) => item.clinic_name || index.toString()}
            />
        </View>
    );
};

额外检查点 #

• 确认API返回的response.data是数组格式，如果返回的是包含数组的对象（比如{ data: [...] }），则需修改为setData(response.data.data)，同时FlatList保持data={data}。
• 检查每个列表项中是否确实存在clinic_name字段，避免渲染时出现undefined。

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