C18

乐观收藏

预览

点击「运行」在隔离沙箱中预览

任务说明

React 沙箱

实现乐观更新的收藏列表：点击「收藏课程名」后界面立即反馈（★ 已收藏），服务端确认后保持；失败则回滚并提示「收藏失败，已回滚」。收藏函数通过 prop 注入：App({ toggleFavorite })，toggleFavorite(id) 返回 Promise<{ ok: boolean }>；测试用可控 Promise 模拟慢响应、失败与乱序。

要求

初始两行「课程名 ☆ 未收藏」；点击后立即显示「★ 已收藏」（不等服务端返回）
两个课程连续点击、后点的先确认：两行最终都是「★ 已收藏」
注入 reject 或 { ok: false } 时：该行回滚为「☆ 未收藏」并显示「收藏失败，已回滚」
同一课程连续点两次（先收藏再取消）且两次都成功后，最终回到「☆ 未收藏」，第二次点击没有被吞掉

R43 写入、乐观更新与回滚

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

乐观收藏

Command Palette