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

Question

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

(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>}