Question

157

Multiple API Calls in React

rated 0 times [ 161] [ 4] / answers: 1 / hits: 17992 / 6 Years ago, mon, july 23, 2018, 12:00:00

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.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

            }

        })

    })

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 components 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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

halleyb

Add To Favorites

Follow

Total Points: 604

Total Questions: 96

Total Answers: 115

Location: Tokelau

Member since Wed, Oct 14, 2020

4 Years ago

halleyb questions

1 Does React apply a shallow/deep compare in hooks's dependency array?

Wed, Feb 23, 22, 00:00, 2 Years ago

1 How to display down/ up arrow based on selection on dropdown?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 How I can check error from try/catch block in Jest

Sat, Sep 12, 20, 00:00, 4 Years ago

1 How to resolve fixed position elements jumps when scrolling | React JS, framer-motion

Mon, Jul 27, 20, 00:00, 4 Years ago

1 How to do masked input in Vuetify?

Wed, Jun 24, 20, 00:00, 4 Years ago

View All

answered 6 Years ago tammyb · Accepted Answer

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

    })

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 complexity.