Qoder生成React组件需显式声明API路径、方法及返回结构，支持React Query、原生fetch或Axios三种数据获取模式，并可自动生成Mock数据、异常处理与重试逻辑。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让Qoder生成的React组件能自动对接后端API并渲染数据，而不是手动写fetch、useState和useEffect组合——这一步必须绕过重复劳动，直接产出带请求逻辑、错误状态、加载反馈的完整组件。
让Qoder理解你的接口契约
在Qoder主对话框中输入需求时，【必须显式声明接口路径、请求方法、返回结构】。例如：“生成商品列表页组件，调用GET /api/products?category=string&limit=number，返回{items: [{id, name, price}], total: number}，需支持分页和空状态。”
不写清楚字段名和嵌套层级，Qoder会按通用schema猜测，生成的TypeScript接口类型可能与真实后端不匹配，导致编译报错或运行时undefined。
选择数据获取模式
方法一：使用React Query（推荐）
在需求描述末尾追加“用React Query v5管理数据流”。Qoder将自动生成useQuery调用、error边界处理、staleTime配置，并在组件内注入isPending、isError、data等标准状态变量。
方法二：手写fetch + useEffect
明确写“不用React Query，用原生fetch+useEffect实现”。Qoder会生成带AbortController清理、try/catch包裹、loading状态切换的完整逻辑块，且自动推导Response类型并做非空断言。
方法三：集成Axios实例
若项目已存在axios实例（如src/lib/api.ts），在需求中注明“复用全局axios实例，baseURL为/api”。Qoder会跳过创建新实例，直接import并调用get/post等方法，同时注入拦截器错误统一处理逻辑。
生成带Mock数据的可运行组件
第一步：在qoder.config.js中启用Mock服务
设置mock: { enabled: true, autoGenerate: true }，Qoder会为未联调的接口自动生成符合返回结构的随机数据。
第二步：在组件代码顶部添加注释指令
写// @qoder-mock GET /api/products → { items: [{ id: 1, name: "测试商品", price: 99.9 }] }，Qoder识别后将该注释转为Mock响应规则，无需启动Mock服务器。
第三步：点击“Run in Sandbox”按钮
Qoder在远程沙箱中启动轻量HTTP服务，将组件挂载到真实DOM，实时验证数据渲染效果。这一步会暴露字段映射错误（比如后端返回price_num但组件取price），必须当场修正。
注意：Mock数据仅用于开发阶段，生成代码中不会残留Mock逻辑，上线前自动剥离。
处理接口异常与重试
① 在需求中指定重试策略：“失败时重试3次，间隔1秒”。Qoder会在React Query配置中加入retry: 3、retryDelay: (attemptIndex) => 1000；若用fetch，则注入指数退避逻辑。
② 显式定义业务错误码处理：“当响应status=401时跳转登录页，status=403显示权限不足提示”。Qoder将插入对应判断分支，并引入useNavigate或自定义Toast Hook。
③ 错误信息透传：“后端返回的message字段需直接展示在页面顶部红条中”。Qoder会提取response.data.message（或response.error.message）并绑定到errorState，避免硬编码字符串。
这一步不能靠默认行为——Qoder不会猜你想要怎样的错误展示方式，必须用自然语言精确描述交互细节。
