在react native中获取API-使用axios

nukf8bse  于 2023-02-09  发布在  React
关注(0)|答案(2)|浏览(150)

我正在尝试从API游戏新闻获取数据。API链接:https://rapidapi.com/danielilieprojects-G7QdvK7X5Ao/api/videogames-news2/
我没有从API中得到任何数据。看起来API给我的是字符串形式的信息,所以我想可能是它的问题所在。你知道我的代码有什么问题吗?
API返回以下数据:

{
  "title": "GTA 6 release date rumours, news, and speculation",
  "date": "Fri, 03 Feb 2023 17:06:57 +0000",
  "description": "Want to know more about the GTA 6 release date? Given how many years it takes to create open worlds of the same calibre as GTA V, it’s no surprise that Rockstar Games has already spent years developing GTA 6. Like most developers, Rockstar prefers to keep its secrets close to its chest until they’re close to the end of development, so we may not see any official GTA 6 gameplay for some time. Early gameplay footage of GTA 6 recently surfaced online, along with lines of source code from the game itself. Rockstar has issued a statement on Twitter which confirms that an unauthorised third party managed to access and download information from their systems, including development footage for the open-world game. However, its statement notes that the developers don’t believe this leak should impact the development of their long-term projects or disrupt their live service games.",
  "image": "https://www.pcgamesn.com/wp-content/sites/pcgamesn/2022/02/gta-6-release-date-2022.jpg",
  "link": "https://www.pcgamesn.com/grand-theft-auto-vi/gta-6-release-date-setting-map-characters-gameplay-trailers"
}

游戏部分

import { StyleSheet, SafeAreaView, FlatList } from "react-native";
import axios from "axios";
import { useState, useEffect } from "react";
import Article from "../components/Article";

export default function Games() {
  let [articles, setArticles] = useState([]);

  const getArticle = () => {
    axios
      .get({
        method: "GET",
        url: "https://videogames-news2.p.rapidapi.com/videogames_news/search_news",
        params: { query: "GTA" },
        headers: {
          "X-RapidAPI-Key":
            "8114fa0745msh7596481771a0acbp1eb7e4jsnaae758420c49",
          "X-RapidAPI-Host": "videogames-news2.p.rapidapi.com",
        },
      })
      .then(function (response) {
        setArticles(response.data);
      })
      .catch(function (error) {
        console.log("error", error);
      })
      .finally(function () {
        setLoading(true);
      });
  };
  useEffect(() => {
    getArticle();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={articles}
        renderItem={({ item }) => (
          <Article
            image={item.image}
            title={item.title}
            description={item.description}
            sourceName={item.source.name}
          />
        )}
        keyExtractor={(item) => item.title}
      />
    </SafeAreaView>
  );
}
ippsafx7

ippsafx71#

Axios返回带有响应data对象。这是存储数据的位置。要确保数据正确,可以执行console.log

.then(function (response) {
  // console.log(response);
  setTitle(response.data[0].item.title);
  setArticle(response.data[0].item.description);
})
ovfsdjhp

ovfsdjhp2#

您的代码存在一些问题:

  • 您正在使用axios.get而不是axios.get方法。正确的语法是axios.get(url,[config]),其中url是要访问的URL,config是可选的配置对象。
  • 在您的响应中,您尝试访问响应[0]的数据,但实际数据结构未知。您应使用response.data访问数据。
  • 您尝试直接从响应Map标题和文章,但尚未将响应数据正确分配给这些状态变量。您需要更新.then块中的状态值,如下所示:
.then(function (response) {
        setTitle(response.data);
        setArticle(response.data);
    }

相关问题