Как снять флажок, если сервер возвращает ошибку? - PullRequest
0 голосов
/ 05 марта 2020

У меня есть основной c переключатель из пользовательского интерфейса материала.

Он имеет событие onChange и отмечен / не отмечен на нем. Также он отправляет запрос на сервер при изменении.

Что я не могу понять, так это снять флажок, если мой запрос к серверу вернул ошибку.

Мой запрос к бэкенду избыточное действие, которое вызывает redux-logic, поэтому я не могу связать .then или .catch

Я использую Redux, поэтому я могу сохранить успешный / неудачный запрос там, но я не уверен как использовать его тогда в компоненте?

код в песочнице

1 Ответ

1 голос
/ 05 марта 2020

Глядя на ваш пример кода, вам нужно решить, стоит ли переключать состояние 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, поэтому вы можете видеть, как все работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...