如何重构我的 React 组件以接受一系列错误，如果 error.show = true 对于其中任何一个错误，则显示错

Question

现在我的 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;

我怎样才能使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;

Answer 2

使用errors: PropTypes.arrayOf(PropTypes.object)接受错误列表，如果要同时接受两者，请使用PropTypes.oneOf([PropTypes.object, PropTypes.arrayOf(PropTypes.object)])来接受。

然后，您可以使用Array.prototype.some()来查看其中是否有任何像this.props.errors.some(error => error.show === true)一样是正确的。

如果您使用的是 lodash，请尝试_.some(this.props.errors, { show: true })。

Answer 3

我希望这有所帮助，但是您可以在显示为真时迭代并返回。

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;
if (!error) {
return false;
}
// Return when at least one error is true
for (let i = 0; i < error.length; i++) {
if (error[i].show) {
return true;
}
}
}
get serviceError() {
const { noData } = this.props;
if (this.hasError) {
return <ServiceError />;
}
return <ServiceError {...noData} noIcon={true} />;
}
render() {
return this.component;
}
}
export default Loader;