DrillLab
练习Practice

动手做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.

0 / 148个做对过you got right

练习Exercises

筛出 148 个练习 · 第 3 / 13 页。Showing 148 · page 3 / 13.
来自From 列表渲染与 keyRendering a list, and the key prop · React 考试React exam
L1认出来Spot it这个列表该用什么当 keyWhat should this list use as its key

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?

先选一个选项Pick an option first
来自From 列表渲染与 keyRendering a list, and the key prop · React 考试React exam
L1认出来Spot it哪一段什么都不会渲染Which one renders nothing at all

下面哪一段会导致表格里一行都不出现(而且不报错)?

Which of these makes the table show no rows at all, without reporting an error?

先选一个选项Pick an option first
来自From useEffect:把 props 的变化同步进 stateuseEffect: copying a change in props into state · React 考试React exam
L2填空Fill the blanks补全编辑回填的 useEffectComplete the useEffect that prefills the form for editing

这是 NoteForm 里那个决定 Task 3 成败的 effect。 两个空:一个分支条件,一个依赖数组。

This is the effect in NoteForm that decides whether Task 3 passes. Two blanks: one branch condition, one dependency array.

TSXsrc/components/NoteForm/index.tsx2 个空2 blanks
1useEffect(() => {
2 if () {
3 setTitle(noteToEdit.title);
4 setContent(noteToEdit.content);
5 } else {
6 setTitle("");
7 setContent("");
8 }
9}, );
把 2 个空都填上才能检查(还差 2 个)Fill all 2 blanks to check (2 to go)
来自From useEffect:把 props 的变化同步进 stateuseEffect: copying a change in props into state · React 考试React exam
L3Debug LabDebug LabDebug Lab · 点 Edit 之后页面卡死Debug Lab · the page freezes after you press Edit

点某一行的 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.

第 1 步 · 先看现象和代码,别急着改Step 1 · read the symptom and the code before you touch anything
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. at NoteForm (src/components/NoteForm/index.tsx:13:3) at NoteManager (src/components/NoteManager/index.tsx:6:3) Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
TSX有问题的依赖数组The broken dependency array示意Illustrative
1useEffect(() => {
2 if (noteToEdit) {
3 setTitle(noteToEdit.title);
4 setContent(noteToEdit.content);
5 } else {
6 setTitle("");
7 setContent("");
8 }
9}, [noteToEdit, title, content]);
第 2 步 · 这是什么类型的错误Step 2 · what kind of error is this
来自From 派生数据与状态提升:什么不该做成 stateValues you can compute, and lifting state up: what should not be state · React 考试React exam
L1认出来Spot it哪个应该做成 stateWhich one should become state

假设要给 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?

先选一个选项Pick an option first
来自From 派生数据与状态提升:什么不该做成 stateValues you can compute, and lifting state up: what should not be state · React 考试React exam
L1认出来Spot it这个 state 该住哪Where should this state live

假设要加一个搜索框(在 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?

先选一个选项Pick an option first
来自From 派生数据与状态提升:什么不该做成 stateValues you can compute, and lifting state up: what should not be state · React 考试React exam
L3写整块Write a block写出派生数据与按钮文字Write the computed value and the button text

补出 isFormInvalid 和按钮的两处动态部分。 注意:只输入空格也应该算无效。

Fill in isFormInvalid and the two changing parts of the button. Note: spaces only should also count as invalid.

要求Requirements
  • 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
TSXsrc/components/NoteForm/index.tsx
This check is textual: it looks for the right constructs, it does not run your code
提示Hints共 4 级,已看 0 级4 levels, 0 opened
先自己想两分钟。想不出来再点右上角 —— 提示是一级一级放的,不会一次给完。Think for two minutes first. Then use the button above — hints come one level at a time, never all at once.

看答案之前,先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来,是两种能力。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.

来自From 先读题:三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam
L1认出来Spot it哪一处改动会让测试挂掉Which change makes a test fail

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.

先选一个选项Pick an option first
来自From 先读题:三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam
L1认出来Spot it题目没写但测试在查的是哪一条The requirement the task never states but a test checks

README 的三个 Task 里没提到某个要求, 但四个测试里有一条专门在查它。是哪个?

One requirement is never mentioned in the three Tasks of the README, yet one of the four tests checks exactly that. Which one is it?

先选一个选项Pick an option first
来自From 先读题:三个任务、一条硬约束、四个测试Read the question first: three tasks, one rule you must not break, four tests · React 考试React exam
L1排顺序Order it把上手顺序排对Put the starting steps in order

拿到这个项目,最合理的动作顺序是什么?

You just received this project. What is the most sensible order to work in?

1写代码:三个 handler 逐个实现Write the code: implement the three handlers one at a time
2npm install,然后 npx vitest run 拿到基线npm install, then npx vitest run to get a baseline
3读 NoteForm / NoteTable / NoteItem,确认它们已经完整、不用改Read NoteForm / NoteTable / NoteItem and confirm they are already complete and need no change
4读 README + 读测试文件,抄下所有验收标准Read the README and the test file, and write down every acceptance criterion
5npx vitest run 验证,再 npm run dev 手动点一遍Verify with npx vitest run, then npm run dev and click through it by hand
6读 types/Note.ts,确认数据形状和 id 的类型Read types/Note.ts to confirm the shape of the data and the type of id
来自From Task 1 · Add:提交表单,新笔记进入表格Task 1 · Add: submit the form and the new note appears in the table · React 考试React exam
L2填空Fill the blanks补全新增逻辑Fill in the add logic

两个空。想清楚「旧的要不要留」和「用哪种更新形式」。

Two blanks. Decide whether the old notes have to stay, and which form of update to use.

TSXsrc/components/NoteManager/index.tsx2 个空2 blanks
1const handleSubmitNote = (submittedNote: Note) => {
2 if (noteToEdit) {
3 // Task 3
4 } else {
5 setNotes(() => [, submittedNote]);
6 }
7};
把 2 个空都填上才能检查(还差 2 个)Fill all 2 blanks to check (2 to go)
来自From Task 1 · Add:提交表单,新笔记进入表格Task 1 · Add: submit the form and the new note appears in the table · React 考试React exam
L3写整块Write a block不看答案,自己写出 Task 1Write Task 1 yourself, without looking at the answer

只给你函数签名和要求。自己写完整实现。 写完点「检查我的代码」,它会用文本规则检查你有没有踩坑。

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.

要求Requirements
  • 把 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)
TSXsrc/components/NoteManager/index.tsx
This check is textual: it looks for the right constructs, it does not run your code
提示Hints共 4 级,已看 0 级4 levels, 0 opened
先自己想两分钟。想不出来再点右上角 —— 提示是一级一级放的,不会一次给完。Think for two minutes first. Then use the button above — hints come one level at a time, never all at once.

看答案之前,先确认你已经自己动手写过一遍。看懂别人的答案和自己写出来,是两种能力。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.