动手做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 个） · 第 1 / 5 页。Showing 54 of 148 · page 1 / 5.下面哪一行会在页面上显示这条笔记的标题内容？
Which line below shows the title of this note on the page?
Q1 的三个任务（Add / Delete / Edit）都要改动笔记列表。 这些逻辑主要写在哪个文件里？
All three tasks in Q1 (Add / Delete / Edit) change the note list. Which file holds most of that logic?
这是 NoteItem 真实的两个按钮。 一个要传整条笔记，一个只传 id —— 想清楚各自要传什么， 以及怎么才能「点击时才执行」。
These are the two real buttons of NoteItem. One passes the whole note, the other passes only the id. Decide what each one has to pass, and how to make it run only on the click.
添加两条笔记后刷新页面（假设有持久化），表格瞬间变空。 有时候浏览器还会卡住。先判断类型，再找病灶。
Add two notes, then reload the page (assume the notes are saved somewhere). The table goes empty at once, and sometimes the browser stops responding. First name the kind of error, then find the line that causes it.
用户点了某一行的 Delete 按钮。把下面五件事按发生顺序排好。
The user clicked the Delete button on one row. Put the five things below in the order they happen.
只给你组件外壳。按要求补出两个 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.
把 NoteForm 里 textarea 那一段补全。 三个空构成一个完整的闭环。
Fill in the textarea part of NoteForm. The three blanks together form one complete loop.
填好标题和内容，点 Add。页面明显闪了一下， 地址栏出现了 ?，表格还是空的。
Fill in a title and some content, then press Add. The page clearly blinks, a ? appears in the address bar, and the table is still empty.
notes 里每条是 { id: number; title: string; content: string }， 用户可以删除任意一条。下面哪个是最合适的 key?
Each item in notes is { id: number; title: string; content: string }, and the user can delete any of them. Which of these is the best key?
下面哪一段会导致表格里一行都不出现（而且不报错）？
Which of these makes the table show no rows at all, without reporting an error?
这是 NoteForm 里那个决定 Task 3 成败的 effect。 两个空：一个分支条件，一个依赖数组。
This is the effect in NoteForm that decides whether Task 3 passes. Two blanks: one branch condition, one dependency array.
点某一行的 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.