React - 从 API 返回数据答案

【问题标题】：React - Returning data from APIReact - 从 API 返回数据
【发布时间】：2019-11-24 16:23:14
【问题描述】：

我知道有类似的问题，但我找不到答案。

首先，如果我做错了什么，请告诉我

我需要使用来自 API 调用的数据填充我的状态。上面的代码运行良好：

export const GetPlanets = async () => {

    const planets = await axios.get(`${BASE_URL}`).catch((e) => {
            console.error(e);
        })

  return planets.data.results
}

但后来我需要从一个 json 响应文件中对多个链接进行第二次调用，并且我设法使其工作（但不知道这是否是正确的方法）

const GetPlanets = async () => {
    let planetas = {}

   await axios.get(`${PLANETS_URL}`)
    .then((p) => {

        planetas = p.data.results

        return axios.get(`${FILMS_URL}`)
    }).then((f) => {

   planetas.films.forEach((v, i) => {
              planetas[i].film = f
        })
     })

        })
        .catch((e) => {
            console.error(e);
        })

    return planetas
}

这是我的组件文件，我尝试在其中获取对象，就像我之前做的那样

useEffect(() => {
    const fetchPlanetas = async () => {  // ME TRYING...
      const planetas = await GetPlanets()
      setPlanetas(planetas)
      setToShow(planetas[0])
    };
    fetchPlanetas()
  }, [])

但我得到的只是未定义

【问题讨论】：

在您的第一个代码块中，您将数据获取的结果分配给名为planets 的const，但随后返回planetas.data.results，但planetas 未在该范围内声明。我假设这是一个错字？如果没有，这可能是您所看到问题的线索......
是的，这是一个错字，我不再使用这个代码了
首先，我建议迁移到 fetch 和 whatwg-fetch polyfill。不再需要 axios 或任何其他试图找出 AJAX 混乱的库。 尤其是如果你使用 ES6 概念，例如 const 和 let
与fetch json 就像const response = await fetch('my_url'); const result = await response.json() 一样简单
一位老师说 axios 主要被公司使用（至少在我的国家），这就是我使用它的原因

标签： javascript reactjs ecmascript-6 axios

【解决方案1】：

您将得到一个 undefined 数组，因为 .map() 需要一个返回值。在您的 .map() 回调中，您没有返回任何内容。

const results = [1, 2, 3, 4]
const results2 = results.map(elem => {
    elem = elem + 1
})
console.log(results2)

但是，即使您确实在 .map() 回调中返回了某些内容，GetFilms(f) 也是异步的，因此您不会像预期的那样将 GetFilms() 的结果映射到数组中。

你有几个选择：

如果您有权访问 API，请在您首次请求时将影片数据连同其余数据一起发送。
使用async/await 和Promise.all() 获取响应。

【讨论】：

那么，我无法像我正在尝试的那样将电影“附加”到行星响应/对象？
我不确定您想要的输出是什么以及您的数据结构是什么样的，但我确信有办法解决这个问题。
是的，它现在有效，我更新了问题。谢谢