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

Question

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

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;

如何让 Loader 接受一组错误，并在 error.show = true 对于其中任何一个错误时显示错误消息？

Answer 1

您可以使用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;