Глядя на ваш пример кода, вам нужно решить, стоит ли переключать состояние switch
на основе результата вызова API. Это означает, что в вашем методе handleChange
вы должны вызывать API до переключения состояния, а если вызов API завершится неудачно, не изменяйте состояние коммутатора (и не сообщайте пользователю, что он вышел из строя).
Я расширил вашу песочницу с помощью ложного вызова API, чтобы продемонстрировать, как это может работать (есть много способов сделать это). mockApiCall
в моем примере будет случайным образом возвращать true
или false
, так что вы можете увидеть, как он обрабатывает любой случай. Просто поменяйте мой mockApiCall
за отправку экшена через Redux, но предпосылка должна быть почти такой же. Рабочий пример Песочница .
Ключ должен изменить ваш handleChange
, как показано ниже:
handleChange = async () => {
this.setState({ busy: true });
//REQUEST TO THE SERVER
const result = await this.mockApiCall(1000);
if (result === true) {
console.log("Api Call Success");
this.setState({ busy: false, switch: !this.state.switch });
} else {
console.log("Api Call Fail");
this.setState({ busy: false });
}
};
Вы можете видеть, что я добавил busy
свойство состояния, чтобы отслеживать, когда вызов API находится в полете. Кроме того, вы можете отключить коммутатор, когда он занят, как показано ниже:
render() {
return (
<div>
<Switch
disabled={this.state.busy}
checked={this.state.switch}
onChange={this.handleChange}
/>
{this.state.busy && <span>Working...</span>}
</div>
);
}
В песочнице выше есть mockApiCall
, поэтому вы можете видеть, как все работает.