时间戳

首页 > 解决方案 > 如果服务器返回错误，如何取消选中开关？

reactjs - 如果服务器返回错误，如何取消选中开关？

问题描述

我有一个来自 Material UI 的基本切换器。

它有 onChange 事件，并且已选中/未选中。它还在更改时向服务器发送请求。

我想不通的是，如果我对服务器的请求发回了错误，如何取消选中它。

我对后端的请求是一个 redux 操作，它调用redux-logic所以我不能链接.then或.catch

我正在使用 Redux，所以我想我可以在那里存储成功/不成功的请求，但我不确定如何在组件中使用它？

沙盒中的代码

标签： reactjsmaterial-ui

解决方案

switch查看您的示例代码，您需要根据 API 调用的结果来决定是否切换状态。这意味着在您的handleChange方法中，您应该在切换状态之前调用 API，如果 API 调用失败，则不要更改开关的状态（并向用户提供一些失败的通知）。

我已经使用模拟 API 调用扩展了您的沙箱，以演示它是如何工作的（有很多方法可以做到这一点）。在mockApiCall我的示例中，将随机返回trueor false，因此您可以看到它如何处理这两种情况。只需将 my 替换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所以你可以看到整个工作。

推荐阅读