這幾天我們完成了 CRUD 與 LocalStorage 的資料儲存，系統功能已經非常完整。但如果使用者剛開始使用，或是把所有的用藥紀錄都刪除了，畫面下方會留下一大塊空白。
在 UI/UX 設計中，這種沒有資料的情境稱為「空狀態 (Empty State)」。與其留白讓使用者不知所措，不如利用這個空間給予明確的視覺提示與引導，這能大幅提升應用程式的質感。
Step 1：使用三元運算子進行條件渲染
我們要利用 JavaScript 的三元運算子 條件 ? (符合時的畫面) : (不符合時的畫面)，來判斷 medications 陣列的長度是否為 0。
修改為這部分，今天的任務就完成了
成果如下圖，會看到提示詞跟你說可以開始新增第一筆資料。
iThome鐵人賽
看影片追技術