iT邦幫忙

2026 iThome 鐵人賽

DAY 15
0
AI Engineering

用 React x Dify 打造 AI 智慧用藥監測系統系列 第 15

DAY15 系統防呆再升級:實作「重複用藥」檢測機制

  • 分享至 

  • xImage
  •  

這幾天我們陸續完成了用藥系統的 UI 與 UX 優化。但是,作為一個與「健康照護」相關的系統,安全性絕對是第一考量。

目前我們的系統有一個隱患:使用者可能會因為忘記,在同一個時間點重複新增了一模一樣的藥物(例如輸入了兩次「08:00 吃普拿疼」)。這不僅會讓清單變得混亂,在真實情境中更可能導致重複服藥的危險。今天,我們要利用 JavaScript 的 some() 陣列方法,為表單加入重複檢測的防呆機制。

Step 1:將資料陣列傳入表單元件
為了讓「新增表單」能夠知道目前已經有哪些藥物,它必須先取得 medications 資料。
打開 src/App.jsx,找到 <AddMedicationForm /> 的地方,把 medications 作為 Props 傳遞進去
https://ithelp.ithome.com.tw/upload/images/20260906/20178797s9XAPXHePx.jpg

Step 2:撰寫重複檢測邏輯
打開 src/components/AddMedicationForm.jsx。
我們需要在元件的接收參數處加上 medications,並在 handleSubmit 函數新增資料之前,先進行「查帳」的動作。
修改 AddMedicationForm.jsx:
https://ithelp.ithome.com.tw/upload/images/20260906/20178797hGts91Ndbo.jpg

寫完之後的結果會如下圖所示,如果要在同一時間新增一樣的資料的話就會跳出請檢查是否重複輸入這句話。
https://ithelp.ithome.com.tw/upload/images/20260906/20178797Rfjn3rXyiK.jpg


上一篇
DAY14 注入溫度與關懷:實作根據時間變化的「動態問候語」
下一篇
DAY16 讓資料井然有序:實作用藥清單的「時間排序」功能
系列文
用 React x Dify 打造 AI 智慧用藥監測系統23
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言