---
title: "4.5.3 真实案例复盘"
order: 4
---


![04-practice-0-to-1_4.5-debug_4.5.3-real-cases.png](/images/Basic/04-practice-0-to-1_4.5-debug_4.5.3-real-cases.png)
# 4.5.3 真实案例复盘

本节展示 6 个待办清单开发中的典型错误，包括完整的报错信息、诊断过程和修复对话。

## 案例速查

| 案例 | 错误类型 | 错误信息关键词 |
|------|---------|---------------|
| [案例 1](#案例-1-任务列表是-undefined) | TypeError | `Cannot read properties of undefined` |
| [案例 2](#案例-2-函数未定义) | ReferenceError | `is not defined` |
| [案例 3](#案例-3-localstorage-解析失败) | SyntaxError | `Unexpected token` |
| [案例 4](#案例-4-点击按钮没反应) | 逻辑错误 | 无报错 |
| [案例 5](#案例-5-样式突然消失) | CSS 错误 | 无报错 |
| [案例 6](#案例-6-完成状态无法保存) | 逻辑错误 | 无报错 |

## 案例 1：任务列表是 undefined

### 错误现象

点击添加按钮后，任务没有出现。控制台显示红色报错。

### 控制台报错

```
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at addTask (index.html:45:15)
    at HTMLButtonElement.<anonymous> (index.html:52:5)
```

### 问题定位

这个错误的意思是：代码试图对 `undefined` 调用 `push` 方法。`push` 是数组的方法，说明代码期望这是一个数组，但实际上是 `undefined`。

查看第 45 行代码：

```javascript
tasks.push({ text: taskText, completed: false });
```

问题出在 `tasks` 变量上——它没有被正确初始化。

### 诊断对话

**你发送的 Prompt**：
```
我的待办清单代码报错了：

【现象】点击添加按钮后，任务没有出现
【报错】Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at addTask (index.html:45:15)

【代码】
function addTask() {
    const input = document.querySelector('.task-input');
    const taskText = input.value.trim();
    if (taskText) {
        tasks.push({ text: taskText, completed: false });
        renderTasks();
        input.value = '';
    }
}

请帮我分析原因。
```

**AI 的分析**：
> 这个错误表示 `tasks` 变量在调用 `push` 时是 `undefined`。问题原因是 `tasks` 没有在使用前初始化为数组。你需要在代码开头声明 `let tasks = [];`。

### 修复对话

**你发送的 Prompt**：
```
请帮我修复。需要：
1. 在代码开头初始化 tasks 变量
2. 给我修复后的完整代码
```

**AI 给出的修复代码**（关键部分）：

```javascript
// 在代码开头添加这一行
let tasks = [];  // 初始化任务数组

function addTask() {
    const input = document.querySelector('.task-input');
    const taskText = input.value.trim();
    if (taskText) {
        tasks.push({ text: taskText, completed: false });
        renderTasks();
        input.value = '';
    }
}
```

### 验证方法

1. 替换代码后刷新页面
2. 在输入框输入任务，点击添加
3. 确认任务出现在列表中
4. 确认控制台没有红色报错

## 案例 2：函数未定义

### 错误现象

页面加载后，控制台立即显示报错。

### 控制台报错

```
Uncaught ReferenceError: addTask is not defined
    at HTMLButtonElement.onclick (index.html:15:42)
```

### 问题定位

`ReferenceError: xxx is not defined` 表示代码中使用了一个不存在的变量或函数。

常见原因：
- 函数名拼写错误
- 函数定义在调用之后（代码顺序问题）
- 函数写在了错误的位置

### 诊断对话

**你发送的 Prompt**：
```
页面加载就报错：ReferenceError: addTask is not defined

我的 HTML 中有这样的按钮：
<button onclick="addTask()">添加</button>

我的 JavaScript 中有这个函数：
function addtask() {
    // ... 函数内容
}

请帮我分析原因。
```

**AI 的分析**：
> 问题在于函数名大小写不一致。HTML 中调用的是 `addTask()`（T 大写），但 JavaScript 中定义的是 `addtask()`（t 小写）。JavaScript 对大小写敏感，这两个被视为不同的函数。

### 修复方法

将 JavaScript 中的函数名改为 `addTask`（与 HTML 中一致）：

```javascript
// 修改前
function addtask() {

// 修改后
function addTask() {
```

### 验证方法

1. 替换代码后刷新页面
2. 确认控制台没有 `ReferenceError`
3. 点击添加按钮，确认功能正常

## 案例 3：localStorage 解析失败

### 错误现象

页面加载时报错，之前保存的任务无法显示。

### 控制台报错

```
Uncaught SyntaxError: Unexpected token 'u', "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at loadTasks (index.html:68:24)
```

### 问题定位

这个错误发生在 `JSON.parse()` 时。错误信息 `"undefined" is not valid JSON` 表示试图解析的内容是字符串 `"undefined"`，而不是有效的 JSON。

常见原因：
- localStorage 中没有数据时，`getItem` 返回 `null`
- 代码没有处理 `null` 的情况，直接传给了 `JSON.parse`

### 诊断对话

**你发送的 Prompt**：
```
localStorage 读取报错：SyntaxError: Unexpected token 'u', "undefined" is not valid JSON

我的读取代码：
function loadTasks() {
    const saved = localStorage.getItem('todoList');
    tasks = JSON.parse(saved);
    renderTasks();
}

请帮我分析。
```

**AI 的分析**：
> 当 localStorage 中没有 'todoList' 这个键时，`getItem` 返回 `null`。`JSON.parse(null)` 会尝试解析，但在某些情况下可能导致问题。更常见的是，如果之前错误地存储了 `undefined` 字符串，就会出现这个错误。你需要在解析前检查数据是否存在。

### 修复对话

**你发送的 Prompt**：
```
请帮我修复 loadTasks 函数，确保：
1. 如果 localStorage 没有数据，使用空数组
2. 如果数据格式不对，也使用空数组
3. 给我完整的修复代码
```

**AI 给出的修复代码**：

```javascript
function loadTasks() {
    const saved = localStorage.getItem('todoList');
    
    // 检查是否有保存的数据
    if (saved && saved !== 'undefined') {
        try {
            tasks = JSON.parse(saved);
        } catch (e) {
            // 如果解析失败，使用空数组
            console.log('数据格式错误，已重置');
            tasks = [];
        }
    } else {
        // 没有保存的数据，使用空数组
        tasks = [];
    }
    
    renderTasks();
}
```

### 验证方法

1. 替换代码后刷新页面
2. 确认控制台没有报错
3. 添加几个任务，刷新页面，确认任务还在

## 案例 4：点击按钮没反应

### 错误现象

点击添加按钮，没有任何反应。控制台也没有报错。

### 问题定位

这是典型的「逻辑错误」——代码语法正确，但行为不符合预期。

可能原因：
- 事件监听器没有正确绑定
- 按钮的选择器写错了
- 代码执行顺序问题（在 DOM 加载前就执行了）

### 诊断对话

**你发送的 Prompt**：
```
我的添加按钮点击没反应，控制台也没有报错。

HTML 中的按钮：
<button class="add-btn">添加</button>

JavaScript 中的绑定：
const addBtn = document.querySelector('.add-button');
addBtn.addEventListener('click', addTask);

请帮我排查问题。
```

**AI 的分析**：
> 问题在于 CSS 选择器不匹配。你的 HTML 中按钮的 class 是 `add-btn`，但 JavaScript 中查找的是 `.add-button`。由于找不到元素，`addBtn` 是 `null`，后续的 `addEventListener` 调用失败（虽然有时不报错）。

### 修复方法

统一选择器名称：

```javascript
// 修改前（选择器不匹配）
const addBtn = document.querySelector('.add-button');

// 修改后（与 HTML 一致）
const addBtn = document.querySelector('.add-btn');
```

### 验证方法

1. 替换代码后刷新页面
2. 点击添加按钮，确认功能正常

## 案例 5：样式突然消失

### 错误现象

让 AI 添加新功能后，整个页面的样式都消失了，变成了纯文本。

### 问题定位

这通常发生在 AI 修改代码时，不小心删除或破坏了 CSS 部分。

常见原因：
- AI 只返回了 JavaScript 部分，你替换时覆盖了整个文件
- CSS 代码中出现了语法错误
- `<style>` 标签被误删

### 诊断对话

**你发送的 Prompt**：
```
我让你添加删除功能后，页面样式全部消失了。
现在页面只显示纯文本，没有任何样式。

请帮我排查：
1. 检查 <style> 标签是否完整
2. 检查 CSS 语法是否有错误
3. 如果样式丢失，请帮我恢复

这是我现在的完整 HTML 文件：
[粘贴完整代码]
```

**AI 的分析**：
> 我发现问题了。在之前的修改中，`<style>` 标签被误删除了。我会帮你恢复完整的样式代码。

### 修复方法

让 AI 重新生成包含完整样式的代码，或者从之前的版本中恢复 CSS 部分。

### 预防措施

- 每次让 AI 修改代码前，先备份当前版本
- 明确告诉 AI：「只修改 JavaScript 部分，不要改动 HTML 和 CSS」
- 收到 AI 的代码后，先检查结构是否完整再替换

## 案例 6：完成状态无法保存

### 错误现象

标记任务为「已完成」后，刷新页面，任务恢复为「未完成」状态。

### 问题定位

这是数据持久化的逻辑错误——完成状态的变更没有触发保存操作。

### 诊断对话

**你发送的 Prompt**：
```
任务的完成状态无法保存。

【复现步骤】
1. 添加一个任务
2. 点击完成按钮，任务显示为已完成
3. 刷新页面
4. 任务恢复为未完成状态

【现象】
添加和删除操作都能保存，但完成状态不行

【相关代码】
function toggleComplete(index) {
    tasks[index].completed = !tasks[index].completed;
    renderTasks();
}

function saveTasks() {
    localStorage.setItem('todoList', JSON.stringify(tasks));
}

请帮我分析原因。
```

**AI 的分析**：
> `toggleComplete` 函数修改了任务状态并重新渲染，但没有调用 `saveTasks()` 保存到 localStorage。添加和删除功能能保存，可能是因为它们的函数中调用了 `saveTasks()`，但 `toggleComplete` 漏掉了。

### 修复对话

**你发送的 Prompt**：
```
请帮我修复，在 toggleComplete 函数中添加保存操作。
```

**AI 给出的修复代码**：

```javascript
function toggleComplete(index) {
    tasks[index].completed = !tasks[index].completed;
    saveTasks();  // 添加这一行：保存到 localStorage
    renderTasks();
}
```

### 验证方法

1. 替换代码后刷新页面
2. 添加一个任务
3. 点击完成按钮
4. 刷新页面
5. 确认任务仍然显示为已完成

## 本节要点

- 每个案例都遵循「现象 → 报错 → 定位 → 修复 → 验证」的流程
- TypeError 通常是变量未定义或类型不对
- ReferenceError 通常是拼写错误或作用域问题
- SyntaxError 在 JSON.parse 时常见于数据为空或格式错误
- 逻辑错误没有报错信息，需要对比「期望行为」和「实际行为」
- 样式错误要检查 CSS 代码是否完整

掌握了这些案例，你就能应对待办清单开发中的大部分问题。

→ [4.5.4 Debug 心法总结](./4.5.4-debug-mindset.md)