React - 每隔几秒检查一次状态变化

Question

In React js, I want to call a function when a state is set to pending.

This state is only changed when the API call is completed which can take a number of seconds.

The flow is:

1. Initial API is called
2. State is set to pending
3. Secondary API is called but can take a number of seconds to set state to complete
4. When state is 'complete' I want to carry out a function.

How would you recommend 'looping' to check for this change of state every few seconds?

I have tried with componentDidUpdate() but haven't had much luck.

Cheers

Edit:
To clarify - I'm waiting on an API call that takes a couple of seconds meaning I'd need to periodically check back.

Answer 1

How would you recommend 'looping' to check for this change of state every few seconds?

I wouldn't. I'd handle the completion of the API call. If it's asynchronous (as you imply), it will provide a way to be notified when it completes — it'll accept a callback, or return a promise, that sort of thing. Use that, rather than a timer and looping.

Answer 2

You can pass setState a callback function.

Example

this.setState({ pending: true }, () => {
  console.log('State set completed for pending');
});