await async callback function

Question

I have a React component where i want to await the response of a callback function, to set a state, that is controlling rather the component isLoading or not

write now i have a functions like this:

     makeRequestHandler = () =>{
      this.setState({isLoading: true})
      this.props.callbackfn()
      this.setState({isLoading: false})
    }

the problem here is obviously, that the state is not waiting for the callback function to finish..

The reason i did this pattern is to have a bigger component to hold all the callback functions and render them to each specefic component..

So instead of calling the function directly, i wrap it inside a handler when i press the button:

   <Button variant="contained" color="primary" className={"button"} onClick={this.makeRequestHandler}>

later on i would like to each more functionality to each component, but It's all based on awaiting the callbackfunction to finish.

You can only usefully `await` a Promise, so see the duplicate. — Quentin, Aug 15 '19 at 12:00
So create an async function and have the handler do nothing except define and call it — Quentin, Aug 15 '19 at 12:03
the problem is, that, then i can't set state outside of the `React scope` — Kristoffer Tølbøll, Aug 15 '19 at 12:05
Or just use callbacks. It's not a complicated function that hugely benefits from await. — Quentin, Aug 15 '19 at 12:06
I am using callbacks.. i just need to wait for it to finish, then use `setState` but I'm not sure how to do this, when it's a callback — Kristoffer Tølbøll, Aug 15 '19 at 12:08
By calling setState inside the callback function. That's the point of callback functions for asynchronous operations! — Quentin, Aug 15 '19 at 12:08
So pass the callback in from the component you want to change. — Quentin, Aug 15 '19 at 12:12
Why does a button need to know that some parent component is loading? At best it needs to know that it is disabled *(while the parent component is loading)* but this sounds like a `prop` containing a boolean. — Thomas, Aug 15 '19 at 12:19
@Thomas yeah basicly i have a generic component that excepts any callback as a props, however i need to await the loading of the callback, and have a loading state, set to true/false, while It's loading — Kristoffer Tølbøll, Aug 15 '19 at 12:36
does this `isLoading` state anything except disabling the button? If not, then it should not exist, and you should replace this state with `props.disabled`. If it changes some styles/shows a spinner, then you should replace it with `props.isLoading`. Summary: it should be no concern of the button to know about the loading or the callback, it should only render what it's been told to (`props`) — Thomas, Aug 15 '19 at 13:13
It is only used to show the content.. It creates a response object based on the loading state like such `const renderResponse = loading ?
Loading
:
{response}
` — Kristoffer Tølbøll, Aug 15 '19 at 13:27
So it makes more sense to have the loading state in the parent component? basicly a loading state for each rendered component? — Kristoffer Tølbøll, Aug 15 '19 at 13:29

await async callback function

0 Answers0