如何使用Axios从API获取结果

Question

我已经开始学习API了。我制作了一个应用程序，其中 API 具有此结果（这是来自 RapidAPI 的 F1 Motorsport API”

{
    "standings":{
       "id":"0",
       "name":"Driver",
       "displayName":"Driver Standings",
       "season":2024,
       "seasonType":2,
       "entries":[
          {
             "athlete":{
                "id":"4665",
                "uid":"s:2000~a:4665",
                "displayName":"Max Verstappen",
                "abbreviation":"VER",
                "name":"Max Verstappen",
                "shortName":"M. Verstappen",
                "flag":{
                   "href":"https://a.espncdn.com/i/teamlogos/countries/500/ned.png",
                   "alt":"Netherlands",
                   "rel":[
                      "country-flag"
                   ]
                }
             },
             "stats":[
                {
                   "name":"rank",
                   "displayName":"Rank",
                   "shortDisplayName":"RK",
                   "description":"Rank",
                   "abbreviation":"RK",
                   "type":"rank",
                   "value":1,
                   "displayValue":"1"
                },
                {
                   "name":"championshipPts",
                   "displayName":"Points",
                   "shortDisplayName":"PTS",
                   "description":"Championship Points",
                   "abbreviation":"PTS",
                   "type":"points",
                   "value":393,
                   "displayValue":"393",
                   "topFinish":1
                },
          {
             "athlete":{
                "id":"5579",
                "uid":"s:2000~a:5579",
                "displayName":"Lando Norris",
                "abbreviation":"NOR",
                "name":"Lando Norris",
                "shortName":"L. Norris",
                "flag":{
                   "href":"https://a.espncdn.com/i/teamlogos/countries/500/gbr.png",
                   "alt":"Britain",
                   "rel":[
                      "country-flag"
                   ]
                }
             },
             "stats":[
                {
                   "name":"rank",
                   "displayName":"Rank",
                   "shortDisplayName":"RK",
                   "description":"Rank",
                   "abbreviation":"RK",
                   "type":"rank",
                   "value":2,
                   "displayValue":"2"
                },
                {
                   "name":"championshipPts",
                   "displayName":"Points",
                   "shortDisplayName":"PTS",
                   "description":"Championship Points",
                   "abbreviation":"PTS",
                   "type":"points",
                   "value":331,
                   "displayValue":"331",
                   "topFinish":1
                },
}

但是当我像这样在代码中实现它时

import React, { useEffect, useState } from "react";
import { StyleSheet, View, Text, TouchableOpacity, FlatList } from "react-native";
import axios from "axios";

function DriverStandings(props) {
  const [standings, setStandings] = useState([]);

  useEffect(() => {
    const fetchStandings = async () => {
      const options = {
        method: "GET",
        url: "https://f1-motorsport-data.p.rapidapi.com/standings-controllers",
        params: { year: "2024" },
        headers: {
          "x-rapidapi-key": "api key example",
          "x-rapidapi-host": "f1-motorsport-data.p.rapidapi.com",
        },
      };

      try {
        const response = await axios.request(options);
        setStandings(response.data.standings.entries);
      } catch (error) {
        console.error(error);
      }
    };

    fetchStandings();
  }, []);

  const renderItem = ({ item }) => {
    const rank = item.stats.find(stat => stat.name === "rank")?.displayValue;
    const points = item.stats.find(stat => stat.name === "championshipPts")?.displayValue;
    const driverName = item.athlete.displayName;

    return (
      <TouchableOpacity
        onPress={() => props.navigation.navigate("DriverDetail", { driverId: item.athlete.id })}
        style={styles.button}
      >
        <View style={styles.rect2}>
          <Text style={styles.number}>{rank}</Text>
          <Text style={styles.name}>{driverName}</Text>
        </View>
        <View style={styles.rect3}>
          <Text style={styles.points}>{points}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={standings}
        renderItem={renderItem}
        keyExtractor={(item) => item.athlete.id.toString()}
      />
    </View>
  );
}

export default DriverStandings;

结果无法加载，并且当我通过控制台检查时显示未定义的 id？我的代码有什么问题。是因为我在代码中调用错误吗？预先感谢

Answer 1

1. 列出项目

从 RapidAPI 返回的响应形状并不是您想象的那样。

我创建了一个 Code Sandbox，它使用您在问题中记录的形状的预设响应 JSON 对象，并且工作正常。

我认为问题在于您正在调用

/standings-controllers

端点，但您期望记录

/standings-drivers

端点的返回形状。浏览 API 文档时很容易犯的错误;-)