空状態UI

React実践 / 全 6 枚

件数だけで判定しない

件数だけを見ると、取得中のあいだも0件に見えてしまいます。

件数だけで判定

{items.length === 0 && (
  <div className="empty">...</div>
)}

状態も見て判定

{state.status === "success" &&
  state.items.length === 0 && (
    <div className="empty">...</div>
  )}

取得中も0件も、件数だけを見ると同じ0に見えます。

1 / 6

← → キーでも送れます