我的 API 返回未定义而不是响应值

Question

我正在使用 React 中的 Axios 使用 API，但是当我在状态中设置响应以便我可以使用数据时，它是未定义的。有趣的是，如果我将 console.log 放在 Get.js 中，我会完美地看到数组。我是否以错误的方式返回值？

PS：当我在 Get.js 中使用 console.log 时，在第二个 .then 中，它会打印两倍的数组。为什么？

MainPage.jsx

import { useEffect, useState } from 'react';
import { axiosGet } from '../../services/Get';
import { Header } from '../../components/Header/';
import { Welcome } from '../../components/Welcome/';

export const MainPage = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    console.log(axiosGet());
    setData(axiosGet());
  }, []);

  return (
    <>
      <Header />
      <Welcome />
      {data.length &&
        data.map(obj => {
        <p key={obj.id}>obj.name</p>;
    })}
    </>
  );

Get.js

import axios from 'axios';

export function axiosGet() {
  axios
    .get(
      `https://api.rawg.io/api/games?key=a6a08e14b07f41d09e846ec3c01e5db0&dates=2019-10-10,2022-03-01&page=2`
    )
    .then(res => {
      return res.data.results;
    })
    .then(arr => {
      return arr;
    })
    .catch(err => {
      console.error('oops! error: ' + err);
    });
}

如果我更改这段代码中的 Get.js 代码：

.then(res => {
          return res.data.results;
        })
        .then(arr => {
          console.log(arr)
          return arr;
        })

我知道了：

Array(20) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

0: Object { slug: "forza-horizon-5", name: "Forza Horizon 5", playtime: 11, … }

1: Object { slug: "call-of-duty-modern-warfare", name: "Call of Duty: Modern Warfare (2019)", playtime: 0, … }

2: Object { slug: "resident-evil-village", name: "Resident Evil: Village", playtime: 16, … }

3: Object { slug: "assassins-creed-valhalla", name: "Assassin's Creed Valhalla", playtime: 0, … }

4: Object { slug: "genshin-impact", name: "Genshin Impact", playtime: 0, … }

5: Object { slug: "mafia", name: "Mafia: Definitive Edition", playtime: 9, … }

6: Object { slug: "superhot-mind-control-delete", name: "SUPERHOT: MIND CONTROL DELETE", playtime: 2, … }

7: Object { slug: "valheim", name: "Valheim", playtime: 11, … }

8: Object { slug: "it-takes-two-2", name: "It Takes Two", playtime: 11, … }

9: Object { slug: "deep-rock-galactic", name: "Deep Rock Galactic", playtime: 6, … }

10: Object { slug: "risk-of-rain-2", name: "Risk of Rain 2", playtime: 7, … }

11: Object { slug: "tell-me-why", name: "Tell Me Why", playtime: 2, … }

12: Object { slug: "factorio", name: "Factorio", playtime: 17, … }

13: Object { slug: "ghostrunner", name: "Ghostrunner", playtime: 4, … }

14: Object { slug: "marvels-avengers", name: "Marvel’s Avengers", playtime: 14, … }

15: Object { slug: "mafia-iii-definitive-edition", name: "Mafia III: Definitive Edition", playtime: 0, … }

16: Object { slug: "guardians-of-the-galaxy", name: "Marvel's Guardians of the Galaxy", playtime: 8, … }

17: Object { slug: "need-for-speed-heat", name: "Need for Speed Heat", playtime: 3, … }

18: Object { slug: "marvels-spider-man-miles-morales", name: "Marvel's Spider-Man: Miles Morales", playtime: 0, … }

19: Object { slug: "streets-of-rage-4", name: "Streets of Rage 4", playtime: 4, … }

length: 20

<prototype>: Array []
Get.js:12:15

Answer 1

函数axios.get() return是您想要的数据的承诺。您需要将代码修改为 return 这个对调用函数的承诺：

export function axiosGet() {
  return axios
   .get(
      `https://api.rawg.io/api/games?key=a6a08e14b07f41d09e846ec3c01e5db0&dates=2019-10-10,2022-03-01&page=2`
    )

然后您需要 await 获得答案（从 Promise 到数据）：

useEffect(async () => {
  console.log(await axiosGet());
  setData(await axiosGet());
}, []);

Answer 2

问题是 axiosGet 实际上 return 什么都没有。

您不能直接将其获取到 return API 数据，因为它只能异步检索。有关如何从异步请求获取响应并在您的代码中使用它的大量讨论，请参阅 this question。

在你的情况下，最简单的解决方案可能是 axiosGet return axios.get（以及你随后的 .then 调用）给你的承诺，并且然后 await 在您的 useEffect 中，以便您可以将组件中的状态设置为它。

因此我将进行以下更改：

首先在axiosGet中添加return语句：

export function axiosGet() {
  return axios
    .get(
      `https://api.rawg.io/api/games?key=a6a08e14b07f41d09e846ec3c01e5db0&dates=2019-10-10,2022-03-01&page=2`
    )
    .then(res => {
      return res.data.results;
    })
    .then(arr => {
      return arr;
    })
    .catch(err => {
      console.error('oops! error: ' + err);
    });
}

并按如下方式调整组件中的 useEffect：

useEffect(async () => {
  const apiData = await axiosGet();
  setData(apiData);
}, []);

我的 API 返回未定义而不是响应值

My API is returning undefined instead of response value

javascript

api

reactjs

react-hooks