javascript - Multiple API Calls in React - Stack Overflow

admin管理员组

文章数量:1328549

I am making an app where I receive data from an API. Once I get this data I want to make another call to the same API with the endpoint that I got from the first call.

fetch(req)
    .then((response)=>(
        response.json()
    )).then((json)=>{
        console.log(json)
        json.meals.map((obj)=>{
            let url = `/${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
            }
        })
    })

I am making two fetch requests here but the problem is the data from the first response is output after second fetch request. Also the state: data gets set before state: recipe and the ponents render with the data from state: data.

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

How can i make sure both get passed down at the same time?

I am making an app where I receive data from an API. Once I get this data I want to make another call to the same API with the endpoint that I got from the first call.

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./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
            }
        })
    })

I am making two fetch requests here but the problem is the data from the first response is output after second fetch request. Also the state: data gets set before state: recipe and the ponents render with the data from state: data.

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

How can i make sure both get passed down at the same time?

• javascript
• html
• reactjs
• fetch-api

Share Improve this question Follow edited Jul 23, 2018 at 18:21 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Jul 23, 2018 at 18:01 Japneet SinghJapneet Singh 6711 gold badge22 silver badges88 bronze badges 1

• resolve your promise and call again – Shubham Agarwal Bhewanewala Commented Jul 23, 2018 at 18:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

In line 3 return return response.json() instead of nothing (undefined).

Update:

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./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')
    })

You need to map your array into promises. Then use Promise.all to wait for them the get resolved.

There was parenthesis missing from:

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

A sidenote, this whole stuff should be refactored. You're not going to get far with this code style / code plexity.

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

    })

I think you are calling api with same req parameters again in the second fetch call

This is a callback hell, please look for Promise races, and check the all() promise method.

本文标签： javascriptMultiple API Calls in ReactStack Overflow