动手做Get your hands on it
练习跟着课文走 —— 每节课尾都有本课的练习。这一页是全部练习的总库，想集中刷题的时候来。 每个练习都写清了它来自哪一节，卡住了就回去看那一节。Practice follows the lessons — every lesson ends with the exercises for that lesson. This page is the whole library, for when you want to drill in one sitting. Each exercise names the lesson it came from, so you can go back when you stall.
已筛到你正在学的《React 考试》。想看全部就点上面的「全部」。Filtered to React exam — the course you are on. Use “All” above to see everything.
练习Exercises
筛出 17 个练习（共 148 个） · 第 1 / 2 页。Showing 17 of 148 · page 1 / 2.只给你组件外壳。按要求补出两个 state 和 handleDelete。 不要看下面的答案，先自己写。
You get only the shell of the component. Add the two states and handleDelete as described. Write it yourself before you look at the answer below.
- 用 useState 声明 notes，类型是 Note[]，初始值为空数组Declare notes with useState, typed Note[], starting as an empty array
- 用 useState 声明 noteToEdit，类型是 Note | null，初始值为 nullDeclare noteToEdit with useState, typed Note | null, starting as null
- handleDelete 按 id 移除对应笔记，必须用函数式更新，不许改动原数组handleDelete removes the matching note by id, using a functional update, without changing the original array
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
点某一行的 Edit 按钮，浏览器标签页转圈，控制台刷出大量警告。 请判断类型并定位。
Press the Edit button on any row. The browser tab spins and the console fills up with warnings. Classify the error, then locate it.
补出 isFormInvalid 和按钮的两处动态部分。 注意：只输入空格也应该算无效。
Fill in isFormInvalid and the two changing parts of the button. Note: spaces only should also count as invalid.
- isFormInvalid 是一个普通 const，不许用 useStateisFormInvalid is a plain const; useState is not allowed
- 只输入空格也要判定为无效（用 trim）Spaces only must also count as invalid (use trim)
- 按钮在表单无效时 disabledThe button is disabled while the form is invalid
- 按钮文字：noteToEdit 存在时是 Update，否则是 Add（大小写必须一致）Button text: Update when noteToEdit exists, otherwise Add (the capitals must match)
- 不许改动 data-testidDo not change any data-testid
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
只给你函数签名和要求。自己写完整实现。 写完点「检查我的代码」，它会用文本规则检查你有没有踩坑。
You get the function signature and the requirements. Write the whole implementation yourself. When you are done, use the check button: it applies text rules to see whether you fell into a known trap.
- 把 submittedNote 追加到 notes 的末尾Append submittedNote to the end of notes
- 原有的笔记全部保留Keep every note that was already there
- 必须用函数式更新 setNotes(prev => ...)Use a functional update: setNotes(prev => ...)
- 不许用 push / splice / unshift 修改原数组Do not change the original array with push / splice / unshift
- 留出 if (noteToEdit) 分支的位置（Task 3 会填）Leave room for the if (noteToEdit) branch (Task 3 fills it in)
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
一行代码的题。但要一次写对，不许用 push / splice。
One line of code. But get it right the first time, and without push or splice.
- 按 id 移除对应的那一条Remove the matching note by id
- 其余笔记全部保留，顺序不变Keep every other note, in the same order
- 必须用函数式更新Use a functional update
- 不许修改原数组（不许用 splice）Do not change the original array (no splice)
- 不许按 title 或下标比较Do not compare by title or by index
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
把 handleEdit 和 handleSubmitNote两个函数完整写出来（含 Task 1 的分支）。 这是 Q1 的完整答案，写对了这道题就通了。
Write both handleEdit and handleSubmitNote in full, including the Task 1 branch. This is the complete answer to Q1: get it right and the question is done.
- handleEdit：把这条笔记设为「正在编辑」，不要改动 noteshandleEdit: mark this note as the one being edited, and leave notes alone
- handleSubmitNote 编辑分支：按 id 就地替换，位置和顺序不变handleSubmitNote, edit branch: replace by id in place, keeping the position and the order
- handleSubmitNote 编辑分支：替换完要退出编辑模式handleSubmitNote, edit branch: leave edit mode once the replace is done
- handleSubmitNote 新增分支：追加到末尾handleSubmitNote, add branch: append to the end
- 全部使用函数式更新，不许修改原数组Use functional updates everywhere, and never change the original array
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
点 Edit，输入框正常回填，按钮变成 Update。 改完内容点 Update —— 列表一点变化都没有， 表单也没清空。控制台干净。
Click Edit and the inputs prefill correctly, and the button becomes Update. Change the content and click Update — the list does not change at all, and the form does not clear either. The console is clean.
现有测试测不出「按 id 删除」。写一个新测试： 添加两条同名笔记，删掉其中一条， 断言另一条还在。
提示：两条数据时页面上有两个 Delete 按钮，getByRole 会因为「找到多个」而抛错 —— 得用 getAllByRole。
The existing tests cannot check the delete by id. Write a new test: add two notes with the same title, delete one of them, and assert that the other is still there.
A note: with two notes there are two Delete buttons on the page, and getByRole throws because it found more than one. Use getAllByRole.
- 添加两条 title 完全相同、content 不同的笔记Add two notes with exactly the same title and different content
- 用 getAllByRole 拿到 Delete 按钮数组，点第一个Use getAllByRole to get the array of Delete buttons, then click the first one
- 断言 notes-list 不再含「内容A」Assert that notes-list no longer holds 内容A
- 断言 notes-list 仍然含「内容B」Assert that notes-list still holds 内容B
- 所有 userEvent 调用都要 awaitPut an await on every userEvent call
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
只给签名。这是 Q2 的完整答案，写对了这道题就通了。 写完可以在本机 npm run q2 验证。
You get only the signature. This is the complete answer to Q2: get it right and the question is done. When you finish you can check it here with npm run q2.
- 同一时刻最多 limit 个任务在运行At most limit tasks are running at the same time
- 某个任务结束后，立刻启动下一个（不是等一批都结束）As soon as one task finishes, start the next one (do not wait for a whole batch)
- 任何任务失败都不能让整体抛错No failing task may make the whole call throw
- 返回数组的顺序必须与 tasks 一致The order of the returned array must match tasks
- 成功写 { status: "fulfilled", value }，失败写 { status: "rejected", reason }On success write { status: "fulfilled", value }; on failure write { status: "rejected", reason }
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
已有 todos 和 filter 两个 state。 写出可见列表和「清除已完成」，注意筛选态下的写操作该作用于谁。
You already have the two states todos and filter. Write the visible list and the clear-completed action, and think about which list a write should act on while a filter is on.
- visible 是派生数据，不许用 useState 或 useEffectvisible is derived data: no useState and no useEffect
- filter 为 "all" 时显示全部，"active" 显示未完成，"done" 显示已完成When filter is "all" show everything, "active" shows the unfinished ones, "done" shows the finished ones
- clearDone 移除所有已完成项，保留未完成项clearDone removes every finished item and keeps the unfinished ones
- 写操作必须作用于 todos，不能作用于 visibleA write has to act on todos, never on visible
- 不许修改原数组Do not change the original array
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
两个 state、一个 effect、一个 reset、一个 mm:ss 格式化。 检查器会专门查清理函数和函数式更新。
Two states, one effect, one reset, and one mm:ss formatter. The checker looks specifically for the cleanup function and the updater form.
- format(65) 要返回 "01:05"，个位数补零format(65) has to return "01:05", padding single digits with a zero
- 点 Start 开始每秒加一，点 Pause 停下并保留当前值Start begins adding one per second; Pause stops and keeps the current value
- Reset 停下来并清零（按钮文字回到 Start）Reset stops and goes back to zero (the button text returns to Start)
- effect 必须返回清理函数清掉定时器The effect has to return a cleanup function that clears the interval
- 必须用函数式更新，避免过期闭包Use the updater form, so there is no stale closure
- 按钮文字：跑着显示 Pause，停着显示 StartButton text: Pause while running, Start while stopped
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.
三个 state 已给好。写出 effect 和三个提前返回。 检查器会查 res.ok、清理函数、竞态防护和 AbortError 过滤。
The three states are given. Write the effect and the three early returns. The checker looks for res.ok, the cleanup function, the race protection and the AbortError filter.
- 从 /api/users/{userId} 取数Fetch from /api/users/{userId}
- 非 2xx 响应要当成错误处理，错误信息形如 HTTP 404Treat any non-2xx response as an error, with a message like HTTP 404
- userId 变化时重新取数，并把上一次的结果作废（竞态防护）Refetch when userId changes, and void the previous result (race protection)
- 用 AbortController 掐掉在途请求，但 AbortError 不展示给用户Use AbortController to cut off the request in flight, but never show AbortError to the user
- 渲染顺序：loading → error → 空数据 → 正常数据Render order: loading, then error, then no data, then the data
- effect 本身不能是 async 函数The effect itself must not be an async function
看答案之前，先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来，是两种能力。Before you open this, make sure you have written it yourself once. Following someone else's answer and producing your own are two different skills.