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()
  }, [])

但我得到的只是未定义

在此处输入图片说明

你得到一个数组,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/awaitPromise.all()获取响应。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从rest api返回数据

来自分类Dev

如何映射在react-native中进行Api调用时返回的数据

来自分类Dev

使用 Promise.all 和 fetch API 返回的数据动态设置状态对象:React+Typescript

来自分类Dev

在React中从api获取数据

来自分类Dev

在 React 中获取 API 数据

来自分类Dev

如何返回Web API数据

来自分类Dev

读取API返回的大量数据

来自分类Dev

从ServiceStack API逐步返回数据

来自分类Dev

API 路由不返回数据

来自分类Dev

OneNote API 返回错误数据

来自分类Dev

Json API 不返回数据

来自分类Dev

React / Axios API调用返回承诺

来自分类Dev

React JS从多个API函数获取数据

来自分类Dev

使用React挂钩从API重新获取数据

来自分类Dev

如何使用React Native从api加载数据

来自分类Dev

如何从API数据设置初始React状态?

来自分类Dev

从 React 中的 API 对象中提取数据

来自分类Dev

如何在 React 中过滤 api 数据

来自分类Dev

React中的JSX函数不返回数据?

来自分类Dev

REST API子资源,数据返回?

来自分类Dev

Facebook Graph API返回空数据

来自分类Dev

ColdFusion CFHTTP处理从API返回的数据

来自分类Dev

使用从Google API返回的数据进行授权

来自分类Dev

Google Analytics(分析)API不返回数据

来自分类Dev

使用Vimeo API 3限制返回的数据

来自分类Dev

从ColdFusion中的REST API返回JSOn数据

来自分类Dev

Yodlee API返回错误,数据已加密

来自分类Dev

分页Web API返回的海量数据

来自分类Dev

处理Web API返回的大型JSON数据