How to disable button only if the request is successful - otherwise keep button enabled in react-CodePudding

Im trying to disable a button only if the api request is successful, otherwise if it is not successful, the button should be enabled still. I have the following state field.

this.state = {
  requestDisabled: false,
};

And in my handler:

 sendSmsCode = async () => {
         const { actions } = this.props;
    
         sendSms(phone)
           .then((data) => {
             this.setState({
               requestDisabled: true
             }, () => {
               actions.showSmsNotification(data);
             });
           })
           .catch(err => actions.showSmsNotification(err));
    
         setTimeout(() => {
           this.setState({
             requestDisabled: false
           });
         }, 10000);
       };

Here is my button:

<Button type="button" disabled={this.state.requestSmsDisabled} onClick={this.sendSmsCode} variant="outlined" color="primary">
                <Typography classes={{ root: classes.requestSmsButtonText }}>
          Send SMS
                </Typography>
              </Button>

However, for some reason, the button is disabled for 10 seconds in both cases. Passed and failed response from the api. Is there something off here?

CodePudding user response：

Your sendSms() function returns an axios Response object. Therefore, the data object will always be populated and an error is never thrown.

sendSmsCode = async () => {
         const { actions } = this.props;
    
         sendSms(phone)
           .then((data) => {
             // the data object is always populated with the response object and never throws an error
             // therefore, this function will always set the state to disabled
             this.setState({
               requestSmsDisabled: true
             }, () => {
               actions.showSmsNotification(data);
             });
           })
           // this is never invoked
           .catch(err => actions.showSmsNotification(err));
    
         setTimeout(() => {
           this.setState({
             requestSmsDisabled: false
           });
         }, 10000);
       };

You need to check for an error in the response from your axios call, either in the sendSms() function or the sendSmsCode() function, something like:

async function sendSms(phone) {
  const options = {
    method: 'POST',
    headers: {
      'content-type': 'application/json'
    },
    data: {
      phone
    },
    url: `${API_ROOT}/sms`
  };
  // there are a number of ways to do this, it all depends on how you want to do it
  const response = await axios(options);
  if (response.status === 200) {
    return response.data;
  } else {
    // do something to indicate an error, e.g. throw an error to get caught in your .catch() statement or return an error message
  }
}