如何在我们等待响应时显示加载器，如果没有数据来显示消息“无数据可用”？

问题描述

我正在尝试从 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 />)
      }
    </>
  );
}