如何解决如何在我们等待响应时显示加载器,如果没有数据来显示消息“无数据可用”?
我正在尝试从 url 中获取数据。我需要在等待响应时显示一个加载程序,并且当一个空数组作为响应出现时,我需要显示一条消息“无数据可用”。
fetch(url).then(res => res.json())
.then(result => {
if(!result.error){this.state.dataStore.resultArr = result}
})
在上面的代码中,我将结果分配给 MobX Store 中名为 dataStore 的变量 resultArr。
<>
{
resultArr && resultArr.length>0 ?
( resultArr.map(ele => ( <div>{ele.Username}<div>))) : (<Loader />)
}
</>
在响应到来之前,我显示了一个加载程序,但这并没有涵盖数据为空数组的情况。我通过使用额外的变量来检查数据是否为空数组来尝试各种可能性,但在某些情况下它们会失败。我应该怎么做才能显示加载器,直到响应出现,如果它是空的,应该显示一条消息,并且应该关闭加载器。
解决方法
您需要一个新变量来记录加载状态。
this.setState({ fetching: true });
fetch(url).then(res => res.json())
.then(result => {
if(!result.error){this.state.dataStore.resultArr = result}
})
.finally(() => {
this.setState({ fetching: false });
})
render() {
if (fetching) return <Loader />;
return (
<>
{
resultArr && resultArr.length>0 ?
( resultArr.map(ele => ( <div>{ele.Username}<div>))) : (<Empty />)
}
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。