React Native+Axios调用API数据可打印但FlatList不渲染求助

问题描述 #

使用React Native结合Axios调用第三方足球数据API时，控制台能正常打印返回数据，但FlatList组件无法渲染内容，尝试添加类型定义也无效。

原代码 #

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

export default function App() {
  const [matches, setMatches] = useState([]);

 useEffect(() =>{
  axios.get('https://api.football-data.org/v4/competitions/DED/matches?matchday=23',{
    headers: {'X-Auth-Token': '877483580c33490eb7d65f8c0cb96c8d'},
    timeout: 5000
  }).then(response => {
    console.log(response.data);
    setMatches(response.data.results);
  }).catch((err) => {
        console.log(err);
  })
 }, [])
 
return (
    <View>
      <FlatList 
        data={matches}
        renderItem={({ item }) => <View><Text>{item.name}</Text></View>}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

问题原因及修复方案 #

1. 数据结构匹配错误 #

API返回的赛事列表实际存储在response.data.matches字段中，而非代码里的response.data.results，这会导致matches始终为空数组，FlatList无内容可渲染。

2. 渲染字段不存在 #

原代码中renderItem尝试访问item.name，但API返回的赛事对象并无该属性，需替换为实际存在的字段（如主客场球队名称）。

修复后的代码 #

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

export default function App() {
  const [matches, setMatches] = useState([]);
  const [loading, setLoading] = useState(true);

 useEffect(() =>{
  axios.get('https://api.football-data.org/v4/competitions/DED/matches?matchday=23',{
    headers: {'X-Auth-Token': '877483580c33490eb7d65f8c0cb96c8d'},
    timeout: 5000
  }).then(response => {
    setMatches(response.data.matches);
    setLoading(false);
  }).catch((err) => {
        console.log(err);
        setLoading(false);
  })
 }, [])

 if (loading) {
  return <View style={{flex:1, justifyContent:'center', alignItems:'center'}}><ActivityIndicator size="large" /></View>
 }
 
return (
    <View style={{flex:1, padding:16}}>
      <FlatList 
        data={matches}
        renderItem={({ item }) => (
          <View style={{padding:12, borderBottomWidth:1, borderBottomColor:'#eee'}}>
            <Text>{item.homeTeam.name} VS {item.awayTeam.name}</Text>
            <Text style={{color:'#666', marginTop:4}}>赛事状态：{item.status}</Text>
          </View>
        )}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
}

额外优化说明 #

• 添加加载状态指示器，提升用户体验
• 确保keyExtractor返回字符串类型（符合React的key要求）
• 给列表项添加基础样式，增强可读性

内容的提问来源于stack exchange，提问作者Hailton Wilson dos Santos