将UI状态处理为布尔标志

Question

我有一个注册组件，当用户输入注册信息时，它将显示一个微调框，直到打开下一页为止。但是如果注册抛出错误，例如“具有该用户名的用户已存在”。加载程序仍在显示。如果出现错误，我希望它消失。

我有一个onSubmit方法

 onSubmit = (e) => {
    this.setState({ saving: true });
    // MixPanel Tracking
    Mixpanel.track('[Register] - Submit');
    const { name, city, countries, whyTravel, whoTravel, loveTravel, hateTravel } = this.state

    const answers = {
      'why': whyTravel,
      'who': whoTravel,
      'love': loveTravel,
      'hate': hateTravel
    }
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.register(values.email, values.password, name, city, countries, answers);
        Mixpanel.track('[Register] - Successful Submission');
      }
    });
  }

在我的渲染方法中，我有

{this.state.saving && 
 <LoadingSpinner /> }

我不确定该怎么做？

这是我使用现有电子邮件地址注册时出错的屏幕截图。

不确定这是哪里来的

Answer 1

完成后似乎没有将saving重置为false。

  this.props.form.validateFields((err, values) => {
    if (!err) {
      this.props.register(values.email, values.password, name, city, countries, answers);
      Mixpanel.track('[Register] - Successful Submission');
    }
    this.setState({ saving: false });
  });

更新：

onSubmit = (e) => {
  this.setState({ saving: true }, () => {
    // MixPanel Tracking
    Mixpanel.track('[Register] - Submit');
    const { name, city, countries, whyTravel, whoTravel, loveTravel, hateTravel } = this.state;
    const { form: { validateFields }, register } = this.props;
    const answers = {
      'why': whyTravel,
      'who': whoTravel,
      'love': loveTravel,
      'hate': hateTravel
    };
    validateFields((err, { email, password }) => {
      if (!err) {
        register(email, password, name, city, countries, answers).then(() => {
          Mixpanel.track('[Register] - Successful Submission');
          // redirect?? change the page you are showing?? 
        }).catch(() => {
          // Something went wrong. Hide the spinner.
          this.setState({ saving: false });
        });
      } else {
        // Hide the spinner, it's not loading anymore. Show the error you got from the form validation
        this.setState({ saving: false });
      }
    });
  });
}

Answer 2

您需要了解Form的{{1}}组件可以具有的状态。根据您的展示情况，它可以是：Container，saving，success，error，其中默认是用户输入数据的状态。

上面的答案显示了如何使用条件渲染来做到这一点，在我的答案中，我将向您展示要避免的常见陷阱以及处理错误的方法。

将UI状态处理为布尔标志

支持UI状态的最简单方法是将每个状态填充为状态中的布尔标志。像这样：

default

存在一个问题，即您的UI状态可能处于不可能的状态，即state: { isSaving: false, isError: false, isSuccess: false, ... }和isSaving。这就是您当前所面临的。避免这种情况的简单方法是使用类似于isError的数据结构来捕获UI状态。像这样：

enum

然后，您需要在正确的位置适当地state: { appState: 'saving', // or error, or validationError, or success, or etc. ... }，例如。当您触发提交时，将setState设置为appState'保存'，如果您有validateErrors，则将setState设置为'validation'错误。在您的诺言链中，将其设置为成功或错误。这样可以避免您遇到的意外问题，并为您提供精细的控制。

错误处理

反应16.引入了setState生命周期方法的ErrorBoundaries概念。一定要使用它们，以使组件正常故障。

如果注册抛出错误，请删除Spinner

2 个答案:

将UI状态处理为布尔标志

错误处理