Javascript 如果其中任何一个错误的error.show=true，如何重构React组件以接受错误数组并显示错误消息

现在，我的React

Loader

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

类加载器扩展组件{
静态显示名称='Loader'；
静态类型={
错误：PropTypes.object，
已加载：PropTypes.bool.isRequired，
noData:PropTypes.object，
渲染：需要PropTypes.func.isRequired
};
获取微调器（）{
常数{
加载
}=这是道具；
返回；
}
获取组件（）{
常数{
加载，
野田，
提供
}=这是道具；
如果（！loaded&！this.hasError）{
返回此.spinner；
}
如果（！loaded&&this.hasError）{
返回此.serviceError；
}
//处理API不返回数据的场景
if（已加载&&！this.hasError&&noData）{
返回此.serviceError；
}
返回render（）；
}
获取hasError（）{
常数{
错误
}=这是道具；
如果（！错误）{
返回false；
}
返回error.show；
}
获取serviceError（）{
常数{
野田
}=这是道具；
if（this.hasError）{
返回；
}
返回；
}
render（）{
返回此.component；
}
}
导出默认加载程序您可以使用该方法检查一个或多个元素是否符合您的条件。像这样的事情应该会让你朝着正确的方向前进：


类加载器扩展组件{
静态显示名称='Loader'；
静态类型={
错误：PropTypes.array，
已加载：PropTypes.bool.isRequired，
noData:PropTypes.object，
渲染：需要PropTypes.func.isRequired
};
获取微调器（）{
常数{
加载
}=这是道具；
返回；
}
获取组件（）{
常数{
加载，
野田，
提供
}=这是道具；
如果（！loaded&！this.hasError）{
返回此.spinner；
}
如果（！loaded&&this.hasError）{
返回此.serviceError；
}
//处理API不返回数据的场景
if（已加载&&！this.hasError&&noData）{
返回此.serviceError；
}
返回render（）；
}
获取hasError（）{
常数{
错误
}=这是道具；
返回错误.some（el=>el.show==true）；
}
获取serviceError（）{
常数{
野田
}=这是道具；
if（this.hasError）{
返回；
}
返回；
}
render（）{
返回此.component；
}
}
导出默认加载程序用于接受错误列表，或者如果希望同时接受这两个错误，则使用

然后，您可以使用查看其中是否有正确的选项，如
this.props.errors.some（error=>error.show==true）

如果您使用的是lodash，请尝试。
我希望这会有所帮助，但您可以在show为true时进行迭代并返回

类加载器扩展组件{
静态显示名称='Loader'；
静态类型={
错误：PropTypes.array，
已加载：PropTypes.bool.isRequired，
noData:PropTypes.object，
渲染：需要PropTypes.func.isRequired
};
获取微调器（）{
const{loaded}=this.props；
返回；
}
获取组件（）{
const{loaded，noData，render}=this.props；
如果（！loaded&！this.hasError）{
返回此.spinner；
}
如果（！loaded&&this.hasError）{
返回此.serviceError；
}
//处理API不返回数据的场景
if（已加载&&！this.hasError&&noData）{
返回此.serviceError；
}
返回render（）；
}
获取hasError（）{
const{error}=this.props；
如果（！错误）{
返回false；
}
//当至少有一个错误为真时返回
for（设i=0；i