仅在没有数据可显示时显示加载指示器。

// 正确 - 仅在没有数据时显示加载
const { data, loading, error } = useGetItemsQuery();

if (error) return <ErrorState error={error} onRetry={refetch} />;
if (loading && !data) return <LoadingState />;
if (!data?.items.length) return <EmptyState />;

return <ItemList items={data.items} />;

// 错误 - 即使有缓存数据也显示加载动画
if (loading) return <LoadingState />; // 重新获取时闪烁！

是否有错误？
  → 是：显示错误状态，带重试选项
  → 否：继续

是否正在加载且没有数据？
  → 是：显示加载指示器（加载动画/骨架屏）
  → 否：继续

是否有数据？
  → 有，有内容：显示数据
  → 有，但为空：显示空状态
  → 无：显示加载（回退）

1. 内联错误（字段级）→ 表单验证错误
2. Toast 通知 → 可恢复错误，用户可重试
3. 错误横幅 → 页面级错误，数据仍部分可用
4. 完整错误页面 → 不可恢复，需要用户操作

// 正确 - 错误始终呈现给用户
const [createItem, { loading }] = useCreateItemMutation({
  onCompleted: () => {
    toast.success({ title: '项目已创建' });
  },
  onError: (error) => {
    console.error('createItem 失败:', error);
    toast.error({ title: '创建项目失败' });
  },
});

// 错误 - 错误被静默捕获，用户毫不知情
const [createItem] = useCreateItemMutation({
  onError: (error) => {
    console.error(error); // 用户看不到任何信息！
  },
});

interface ErrorStateProps {
  error: Error;
  onRetry?: () => void;
  title?: string;
}

const ErrorState = ({ error, onRetry, title }: ErrorStateProps) => (
  <div className="error-state">
    <Icon name="exclamation-circle" />
    <h3>{title ?? '出了点问题'}</h3>
    <p>{error.message}</p>
    {onRetry && (
      <Button onClick={onRetry}>重试</Button>
    )}
  </div>
);

关键：在异步操作期间始终禁用触发器。

// 正确 - 加载时按钮禁用
<Button
  disabled={isSubmitting}
  isLoading={isSubmitting}
  onClick={handleSubmit}
>
  提交
</Button>

// 错误 - 用户可以多次点击
<Button onClick={handleSubmit}>
  {isSubmitting ? '提交中...' : '提交'}
</Button>

// 错误 - 没有空状态
return <FlatList data={items} />;

// 正确 - 显式空状态
return (
  <FlatList
    data={items}
    ListEmptyComponent={<EmptyState />}
  />
);

// 搜索无结果
<EmptyState
  icon="search"
  title="未找到结果"
  description="尝试其他搜索词"
/>

// 列表尚无项目
<EmptyState
  icon="plus-circle"
  title="暂无项目"
  description="创建您的第一个项目"
  action={{ label: '创建项目', onClick: handleCreate }}
/>

// 错误 - 数据存在时也显示加载动画（导致闪烁）
if (loading) return <Spinner />;

// 正确 - 仅在没有数据时显示加载
if (loading && !data) return <Spinner />;

// 错误 - 错误被吞没
try {
  await mutation();
} catch (e) {
  console.log(e); // 用户毫不知情！
}

// 正确 - 错误呈现给用户
onError: (error) => {
  console.error('操作失败:', error);
  toast.error({ title: '操作失败' });
}

// 错误 - 提交时按钮未禁用
<Button onClick={submit}>提交</Button>

// 正确 - 禁用并显示加载状态
<Button onClick={submit} disabled={loading} isLoading={loading}>
  提交
</Button>

此技能适用于执行概述中描述的工作流或操作。

来源说明：本文内容整理自开源项目 agentic-awesome-skills（中文翻译版），遵循 CC BY 4.0（知识共享署名 4.0 国际）许可协议，此处作为中文资料整理分享，版权归原作者所有。

React Ui Patterns 实用指南

用于加载状态、错误处理和数据获取的现代 React UI 模式。用于构建 UI 组件、处理异步数据或管理 UI 状态。

人工智能

本文介绍现代React UI模式，涵盖加载状态、错误处理、数据获取与表单提交的实用指南。核心原则包括不显示过时UI、始终呈现错误、乐观更新及渐进式展示。提供骨架屏与加载动画的选择标准、按钮状态管理、空状态设计及常见反模式，附检查清单供开发者直接应用。

Agent

ReAct 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

React Ui Patterns 实用指南

React Ui Patterns 实用指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐