时间戳

首页 > 解决方案 > 我如何重构我的 React 组件以接受一系列错误并在 error.show = true 时显示错误消息对于这些错误中的任何一个

javascript - 我如何重构我的 React 组件以接受一系列错误并在 error.show = true 时显示错误消息对于这些错误中的任何一个

问题描述

现在我的 ReactLoader 组件只接受一个错误对象。因此，如果有多个错误条件，我必须编写一个条件语句，将这些错误减少为一个错误。

class Loader extends Component {
  static displayName = 'Loader';

  static propTypes = {
    error: PropTypes.object,
    loaded: PropTypes.bool.isRequired,
    noData: PropTypes.object,
    render: PropTypes.func.isRequired
  };

  get spinner() {
    const {
      loaded
    } = this.props;

    return <Spinner show = {!loaded
    }
    />;
  }

  get component() {
    const {
      loaded,
      noData,
      render
    } = this.props;

    if (!loaded && !this.hasError) {
      return this.spinner;
    }

    if (!loaded && this.hasError) {
      return this.serviceError;
    }

    // Handles API returning no data scenario
    if (loaded && !this.hasError && noData) {
      return this.serviceError;
    }

    return render();
  }

  get hasError() {
    const {
      error
    } = this.props;

    if (!error) {
      return false;
    }

    return error.show;
  }

  get serviceError() {
    const {
      noData
    } = this.props;

    if (this.hasError) {
      return <ServiceError / > ;
    }

    return <ServiceError { ...noData
    }
    noIcon = {
      true
    }
    />;
  }

  render() {
    return this.component;
  }
}

export default Loader;

如果 error.show = true 对于这些错误中的任何一个，我怎样才能Loader接受一系列错误并显示错误消息？

标签： javascriptreactjserror-handling

解决方案

您可以使用array.some方法来检查一个或多个元素是否符合您的条件。这样的事情应该让你朝着正确的方向前进：

class Loader extends Component {
  static displayName = 'Loader';

  static propTypes = {
    error: PropTypes.array,
    loaded: PropTypes.bool.isRequired,
    noData: PropTypes.object,
    render: PropTypes.func.isRequired
  };

  get spinner() {
    const {
      loaded
    } = this.props;

    return <Spinner show = {!loaded
    }
    />;
  }

  get component() {
    const {
      loaded,
      noData,
      render
    } = this.props;

    if (!loaded && !this.hasError) {
      return this.spinner;
    }

    if (!loaded && this.hasError) {
      return this.serviceError;
    }

    // Handles API returning no data scenario
    if (loaded && !this.hasError && noData) {
      return this.serviceError;
    }

    return render();
  }

  get hasError() {
    const {
      error
    } = this.props;

    return error.some(el => el.show === true);
  }

  get serviceError() {
    const {
      noData
    } = this.props;

    if (this.hasError) {
      return <ServiceError / > ;
    }

    return <ServiceError { ...noData
    }
    noIcon = {
      true
    }
    />;
  }

  render() {
    return this.component;
  }
}

export default Loader;

推荐阅读