如何在我们等待响应时显示加载程序，如果没有数据显示消息 "No data available"？

Question

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

在响应到来之前，我显示了一个加载器，但这不包括数据为空数组的情况。我通过使用一个额外的变量来检查数据是否为空数组来尝试各种可能性，但在某些情况下它们会失败。我应该怎么做才能在响应到来之前显示加载器，如果它是空的，则应显示一条消息并关闭加载器。

Answer 1

您需要一个新的变量来记录加载状态。

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 />)
      }
    </>
  );
}

如何在我们等待响应时显示加载程序，如果没有数据显示消息 "No data available"？

How to display loader while we wait for the response and if no data comes display a message "No data available"?

javascript

reactjs

mobx