這幾天我們陸續完成了用藥系統的 UI 與 UX 優化。但是,作為一個與「健康照護」相關的系統,安全性絕對是第一考量。
目前我們的系統有一個隱患:使用者可能會因為忘記,在同一個時間點重複新增了一模一樣的藥物(例如輸入了兩次「08:00 吃普拿疼」)。這不僅會讓清單變得混亂,在真實情境中更可能導致重複服藥的危險。今天,我們要利用 JavaScript 的 some() 陣列方法,為表單加入重複檢測的防呆機制。
Step 1:將資料陣列傳入表單元件
為了讓「新增表單」能夠知道目前已經有哪些藥物,它必須先取得 medications 資料。
打開 src/App.jsx,找到 <AddMedicationForm /> 的地方,把 medications 作為 Props 傳遞進去
Step 2:撰寫重複檢測邏輯
打開 src/components/AddMedicationForm.jsx。
我們需要在元件的接收參數處加上 medications,並在 handleSubmit 函數新增資料之前,先進行「查帳」的動作。
修改 AddMedicationForm.jsx:
寫完之後的結果會如下圖所示,如果要在同一時間新增一樣的資料的話就會跳出請檢查是否重複輸入這句話。