时间戳

首页 > 解决方案 > React - 从 API 返回数据

javascript - React - 从 API 返回数据

问题描述

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

首先，请告诉我我是否做错了什么

我需要使用来自 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()
  }, [])

但我得到的只是未定义

在此处输入图像描述

标签： javascriptreactjsecmascript-6axios

解决方案

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

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

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

你有几个选择：

  1. 如果您有权访问 API，请在您提出第一个请求时将影片数据与其余数据一起发送。

  2. 使用async/await和Promise.all()获得响应。

推荐阅读