使用適當的載入狀態、錯誤處理和使用者回饋來建構 React 元件是一項挑戰，且常導致令人困惑的使用者體驗。此技能提供經過實際驗證的 UI 模式，用於處理非同步操作、顯示適當的回饋，以及建立流暢的使用者體驗。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-ui-patterns”。 How do I show loading states without flashing when refetching data?
预期结果:
Use the pattern: only show loading indicator when loading AND no data exists. This prevents the flash when cached data is available. Example: if (loading && !data) return <Skeleton />;
正在使用“react-ui-patterns”。 What is the proper way to handle errors in React?
预期结果:
Always surface errors to users with clear messaging. Use a hierarchy: inline errors for forms, toasts for recoverable errors, banners for page-level issues, and full error screens for unrecoverable failures.
正在使用“react-ui-patterns”。 How should I handle button states during form submission?
预期结果:
Disable the button during submission AND show a loading indicator. This prevents duplicate submissions and gives users feedback that their action is in progress.
安全审计
安全Static analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
质量评分
你能构建什么
建構資料驅動的 React 元件
在建立從 API 擷取資料的元件時，遵循既定的模式套用適當的載入、錯誤和空狀態。
處理表單提交
實作具有非同步提交的表單時，確保按鈕在提交期間被停用，並顯示適當的載入回饋。
改善使用者體驗
重構現有的 React 程式碼以消除令人困惑的載入閃爍和隱藏的錯誤。
试试这些提示
示範如何為擷取資料的 React 元件實作載入狀態。我希望當快取資料已存在時不顯示旋轉載入指示器。
為 React 建立一個錯誤狀態元件，顯示錯誤訊息並包含重試按鈕。我該如何將其與 Apollo 或 React Query 整合？
在 React 中撰寫表單提交模式，在突變期間停用提交按鈕、顯示載入旋轉指示器，並顯示成功或錯誤的提示訊息。
建構一個處理所有 UI 狀態的完整 React 元件：載入（帶骨架屏）、錯誤（帶重試）、空狀態（帶行動號召），以及成功（帶資料顯示）。
最佳实践
- 永不忘顯示過時的 UI - 載入旋轉指示器只應在沒有資料可顯示時出現
- 永遠向使用者顯示錯誤 - 切勿悄悄吞下錯誤而不提供回饋
- 在非同步操作期間停用按鈕以防止重複提交
避免
- 只要 loading 為 true 就顯示載入旋轉指示器，無論快取資料是否存在
- 捕获錯誤但只記錄到主控台，而不向使用者顯示回饋
- 允許使用者在表單提交期間多次點擊提交