How to call fetches sequentially (A -> B -> C) inside a React component?

Question

I have 3 fetch functions: a(), b(a_id), c(b_id). Function a will return an a_id and pass to function b, and b will return an id and pass to c.

componentDidUpdate(prevProps) {
  this.gotoanotherPage(this.props.a_id);
}

generateBody() {
  this.props.a();
  this.props.b(this.props.a_id);
  this.props.c(this.props.b_id);
}

render() {
  body = generateBody();
  return <framework {body}/>
}

My problem is a() has not finished fetching and getting a response back yet, yet b and c already execute and this.props.a_id and this.props.b_id are undefined. I couldn't modify the a,b, and c functions.

Anyone know how to set a function call in an order?

What does this.props.a return? as well as the other functions? Is it a void function, or does it return a value? And if it returns a value what type of value does it return? — kyle
– kyle, Commented Sep 6, 2018 at 23:00
Function-a is a fetch call and it will return a string in Jason, then it will pass to function-b, function-b is a fetch call also, then it will return a string in Json too, then pass to function-c, function-c is a fetch call also. Function-c will return a Json string — lin
– lin, Commented Sep 8, 2018 at 0:22

GG. · Accepted Answer · 2018-09-05 22:42:45Z

1

You can use componentDidMount to call the first fetch, then use componentDidUpdate to call the second fetch that depends on the first one. Then do the same thing for the third fetch.

You can use prevProps to check if you received the first and second responses.

Your component will look to something like this:

class MyComponent extends Component {
  componentDidMount() {
    this.props.fetchA();
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.a_id && this.props.a_id) { // it means you received a_id
      this.props.fetchB(this.props.a_id);
    }

    if (!prevProps.b_id && this.props.b_id) { // it means you received b_id
      this.props.fetchC(this.props.b_id);
    }
  }

  render() {
    return <framework />
  }
}

edited Sep 5, 2018 at 22:42

answered Sep 5, 2018 at 22:31

GG.

22k14 gold badges93 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lin Over a year ago

I could not do it in this way, in the componenetDidUpdate, I also set to go to another page, so it will execute go to another page before get FetchB back. I need the response from function_b and function_c to output another page.

GG. Over a year ago

Like in my example, you can check if you received B and C before going to the other page.

lin Over a year ago

it doesn't work in this way, at least it doesn't work in my case

lin Over a year ago

I am thinking about using promise like var promise = new Promise(()=>this.props.a()); promise.then(this.props.a_id => this.props.b(a_id)); but it still execute b before a

Collectives™ on Stack Overflow

How to call fetches sequentially (A -> B -> C) inside a React component?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related