反应setstate不渲染，直到回调完成

Question

I am trying to change button to saving state while I run code to get information.

I have this.setState({ saving: true }, () => this.save(event) })

In this.save I have a rest call. I can see from the log that the state is updated but visually on the site the button does not go into the spinning circle like it should with that updated value.

Is there a way to force update rendering before running the callback function or a better method to set a button to saving while I do a remote call that could take a little bit of time?

Answer 1

There is no reason to force this. Change your state in parallel to the actual saving:

<button onClick={() => this.save()}>save</button>

paired with:

save() {
  this.setState({ saving: true });
  remoteAPI.save({ 
    data: this.getSaveData(),
    credentials: this.getCredentials()
    ...
  }, response => {
    this.setState({ saving: false });
    if(response.error) {
      // ohnoes!
    } else {
      // nice.
    }
  });
}