React Native页面调用API返回JSON却仍空数组且报driverName未定义错

核心问题 #

FlatList的renderItem回调参数解构错误，导致无法获取到列表项数据，进而触发Cannot read property 'driverName' of undefined错误。

具体修复步骤 #

1. 修正FlatList的renderItem解构

FlatList的renderItem接收的是包含item（当前列表项）和index的对象，你错误地解构为driver，导致变量未定义。将代码修改为：

renderItem={({ item }) => (
  <StandingTable
    rankNumber={item.driverPosition["0"]}
    driverName={item.driverName}
    points={item.driverPoints["0"]}
  />
)}

2. 修正StandingTable的props传递

原代码中rankNumber、driverName、points的参数传递完全错误，需根据API返回的数据结构正确取值：

• rankNumber对应item.driverPosition["0"]
• driverName对应item.driverName
• points对应item.driverPoints["0"]

3. 移除无效的console.log

setDriverStandingsList是异步操作，调用后立即打印driverStandingsList只会输出旧值。若需查看更新后的数据，可添加监听useEffect：

useEffect(() => {
  console.log('driverStandingsList updated: ', driverStandingsList);
}, [driverStandingsList]);

4. 修正状态类型不匹配问题

driversTable和constructorsTable初始值为数组，但点击按钮时设置为布尔值，类型不匹配会导致后续逻辑异常，建议修改初始值为布尔类型：

const [driversTable, setDriversTable] = useState(true);
const [constructorsTable, setConstructorsTable] = useState(false);

修复后的关键代码片段 #

// 修正后的loadDriversStandings函数
const loadDriversStandings = () => {
  setIsLoading(true);
  const url = baseApiUrl + '/standings/driver-standings-get.php?' + apikey;
  axios
    .get(url)
    .then((response) => {
      setDriverStandingsList(response.data.data);
      setIsLoading(false);
    })
    .catch((error) => console.log(error));
};

// 修正后的FlatList部分
<FlatList
  data={driverStandingsList}
  keyExtractor={(item, index) => String(index)}
  renderItem={({ item }) => (
    <StandingTable
      rankNumber={item.driverPosition["0"]}
      driverName={item.driverName}
      points={item.driverPoints["0"]}
    />
  )}
  ListFooterComponent={renderLoader}
/>

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