反应-从API返回数据

Question

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

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

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

但是我得到的是不确定的

Answer 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()的结果映射到数组中。

您有两种选择：

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

2. 使用async/await和Promise.all()获取回复。