javascript - React 中的多个 API 调用

Question

我正在开发一个应用程序，我可以从 API 接收数据。获得此数据后，我想使用从第一次调用获得的端点再次调用同一 API。

fetch(req)
    .then((response)=>(
        response.json()
    )).then((json)=>{
        console.log(json)
        json.meals.map((obj)=>{
            let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
            let req = new Request(url,{
            method: 'GET',
            headers: header
        })
        fetch(req)
        .then((response)=>(
        response.json()
        )).then((json)=>{
            console.log(json);
        this.setState((prevState)=>{
                recipe: prevState.recipe.push(json)
        })
        })
        })
        this.setState(()=>{
            return{
                data: json
            }
        })
    })

我在这里发出了两个获取请求，但问题是第一个响应的数据是在第二个获取请求之后输出的。此外，state: data 在 state: recipe 之前设置，组件使用来自 state: data 的数据呈现。

render(){
      return(
        <div className="my-container">
        <EnterCalorie getData={this.getData}/>
        <MealData data={this.state.data} recipe={this.state.recipe}/>
        </div>
      )
    }

我怎样才能确保两者同时被传递？

Answer 1

在第 3 行返回 return response.json() 而不是什么都没有(undefined)。

更新:

const toJson = response => response.json()

fetch(req)
    .then(toJson)
    .then(json => {
        this.setState(() => {
            return {
                data: json
            }
        })

        return json
    })
    .then((json) => {
        console.log(json)
        const promises = json.meals.map((obj) => {
            let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
            let req = new Request(url, {
                method: 'GET',
                headers: header
            })
            return fetch(req)
                .then(toJson)
                .then((json) => {
                    console.log(json);
                    this.setState((prevState) => ({
                        recipe: prevState.recipe.push(json)
                    }))
                })
        })

        return Promise.all(promises)
    })
    .then(() => {
        console.log('job done')
    })

您需要将您的数组映射到 promise 中。然后使用 Promise.all 等待它们得到解决。

缺少括号:

this.setState((prevState)=>{
    recipe: prevState.recipe.push(json)
})

旁注，这整个东西都应该重构。这种代码风格/代码复杂性不会让您走得太远。