在ReactJS中检查数组是否有数据或是否为空时遇到问题

Question

我的状态数组我将状态默认值设置为空数组[]。加载API请求后，我需要使用loader，直到数据准备就绪。所以你使用的条件如下：

(if array length  === 0  loader will show otherwise data will show)

但是当API返回空数据时，我想要显示没有可用的数据。

最好的方法是什么？

我的代码如下 - 如果API返回空结果，我如何检查条件？

this.state.offer.length == 0 ?  <Loader /> : <OfferList />

Answer 1

最简单的是默认值为undefined而不是空数组。然后在渲染检查中：

• undefined表示正在加载
• 空数组表示没有数据，因此显示消息
• 非空数组，您可以显示数据

{!this.state.offer ? <Loader /> : this.state.offer.length ? <OfferList /> : <span>No data available</span>}

Answer 2

最好的方法是使用三元操作。首先将商品初始化为undefined，如果没有数据，您将返回一个空数组。接下来在render method（）中使用下面的表达式。

{this.state.offer === undefined ? <Loader /> : this.state.offer.length > 0 ? <OfferList /> : "No data Available"}

Answer 3

理想情况下，您不应该根据数组的大小来显示或隐藏加载程序，它应该取决于您的AJAX调用。

只需将变量置于您的状态，例如＆＃34; isLoading＆＃34;，在进行ajax调用时将其标记为true，并在响应时将其标记为false，而不管其是成功还是失败。

Float

在ajax上，请致电

this.state ={ offer: [], isLoading: false }

关于回复，请致电

this.setState({isLoading:true});

你可以显示

  

没有基于数组大小的数据。

Answer 4

在state中添加另一个属性，表示如下处理

state = {
  offer: [],
  processing: false
}

然后将此属性用于show/hide您的加载程序。

您可以在进行API调用时设置/取消设置此属性。