在 ReactJS 中检查数组是否有数据或是否为空时遇到问题
我的状态中有一个数组，我将状态默认值设置为空数组
[]
。API 请求加载后，我需要使用加载器，直到数据准备就绪。因此，您使用如下条件：
(if array length === 0 loader will show otherwise data will show)
但是当 API 返回空数据时，我想显示没有可用数据。
最好的方法是什么？
我的代码如下 - 如果 API 返回空结果，我该如何检查条件？
this.state.offer.length == 0 ? <Loader /> : <OfferList />
最简单的方法是将默认值设为
undefined
，而不是空数组。然后在渲染检查中：
-
undefined表示正在加载 - 空数组表示没有数据，因此显示消息
- 非空数组可以显示数据
{!this.state.offer ? <Loader /> : this.state.offer.length ? <OfferList /> : <span>没有可用数据</span>
最佳方法是使用三元运算。首先将 offer 初始化为
undefined
，如果没有数据，API 将返回一个空数组。接下来在 render 方法 () 中使用以下表达式。
{this.state.offer === undefined ? <Loader /> : this.state.offer.length > 0 ? <OfferList /> : "No data Available">
理想情况下，您不应根据数组的大小来显示或隐藏加载器，而应取决于您的 AJAX 调用。
您只需将一个变量放入状态中，如“isLoading”，在进行 ajax 调用时将其标记为 true，在响应时将其标记为 false，无论成功还是失败。
this.state ={
offer: [],
isLoading: false
在 ajax 上，调用
this.setState({isLoading:true});
在响应上，调用
this.setState({isLoading:true});
然后您就可以显示
no data available on the basis of size of array.