动手做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
筛出 54 个练习（共 148 个） · 第 2 / 5 页。Showing 54 of 148 · page 2 / 5.假设要给 Notes Manager 加一个「显示当前有几条笔记」的文字。 这个数字应该怎么实现？
Say you have to add a line to Notes Manager that shows how many notes there are right now. How should that number be produced?
假设要加一个搜索框（在 NoteForm 上方，属于 NoteManager 的直接子元素）， 输入关键词后表格只显示匹配的笔记。 搜索关键词这个 state 该放在哪？
Say you add a search box above NoteForm, as a direct child of NoteManager. Once a keyword is typed, the table shows only the notes that match. Where should the state holding that keyword go?
补出 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.
README 只说了「不得修改任何 data-testid」。 下面哪些改动也会让现有测试失败？（多选）
The README says only that no data-testid may be changed. Which of the changes below also break the existing tests? (more than one)
这题是多选。More than one answer is correct.
拿到这个项目，最合理的动作顺序是什么？
You just received this project. What is the most sensible order to work in?
两个空。想清楚「旧的要不要留」和「用哪种更新形式」。
Two blanks. Decide whether the old notes have to stay, and which form of update to use.
只给你函数签名和要求。自己写完整实现。 写完点「检查我的代码」，它会用文本规则检查你有没有踩坑。
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.
三个空。第三个空是这道题唯一会绕人的地方。
Three blanks. The third one is the only part that trips people up.
一行代码的题。但要一次写对，不许用 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.
测试全过，但手动测试时发现：三条标题相同的笔记， 点其中一条的 Delete，三条一起消失。
Every test passes, but a manual check shows this: with three notes that share a title, clicking Delete on one of them makes all three disappear.
四个空横跨两个函数。第 4 个空是最容易漏的那一行 —— 漏了它测试照样能过，但行为明显不对。
Four blanks across two functions. The fourth is the line people forget most often — without it the tests still pass, but the behavior is clearly wrong.