前端常见错误 - 实践

1. TypeError: Cannot read property 'xxx' of undefined

错误原因：尝试访问一个 undefined 或 null 对象的属性 / 方法。
示例代码：

const user = { name: "John" };console.log(user.address.street); // user.address 为 undefined

解决方案：

• 使用可选链操作符（?.）：user.address?.street
• 添加条件检查：if (user.address) { ... }
• 使用默认值：const street = user.address?.street || "Unknown";

2. ReferenceError: xxx is not defined

错误原因：引用了一个未定义的变量、函数或模块。
示例代码：

console.log(myVariable); // 变量未声明

解决方案：

• 检查变量名拼写是否正确
• 确认变量是否在当前作用域内（避免闭包陷阱）
• 确保依赖的模块已正确导入：import { myFunction } from './module';

3. TypeError: xxx is not a function

错误原因：尝试调用一个非函数类型的变量。
示例代码：

const myObject = { name: "John" };myObject.sayHello(); // myObject.sayHello 不是函数

解决方案：

• 确认函数名拼写是否正确
• 检查函数是否被正确赋值：const sayHello = () => { ... }
• 避免覆盖内置函数：console.log();

4. SyntaxError: Unexpected token

错误原因：代码中存在语法错误（如括号未闭合、缺少分号、引号不匹配）。
示例代码：

if (true { console.log("Hello"); } // 缺少右括号

解决方案：

• 检查报错行及前后的代码
• 使用代码格式化工具（如 Prettier）自动修复
• 注意 JSX/TSX 中的尖括号与 HTML 标签的区别

5. RangeError: Maximum call stack size exceeded

错误原因：递归函数没有终止条件，导致无限循环调用。
示例代码：

function countdown(n) {  return countdown(n - 1); // 缺少终止条件}countdown(10);

解决方案：

• 添加终止条件：if (n <= 0) return;
• 使用迭代（循环）替代递归

6. Promise rejection without a catch block

错误原因：Promise 被拒绝（rejected）但没有 .catch() 处理。
示例代码：

fetchData().then(data => { ... }); // 没有处理错误的情况

解决方案：

• 添加 .catch() 块：fetchData().then(...).catch(error => { ... })
• 使用 async/await 和 try/catch：

async function loadData() {  try {    const data = await fetchData();  } catch (error) {    console.error(error);  }}

7. NetworkError: Failed to fetch

错误原因：网络请求失败（如跨域问题、服务器未响应、URL 错误）。
示例代码：

fetch("https://api.example.com/data")  .then(response => response.json())  .catch(error => console.error("Fetch error:", error));

解决方案：

• 检查 URL 是否正确
• 确认服务器是否正常运行
• 处理 CORS 问题
• 添加超时处理：AbortController

8. Module not found: Error: Can't resolve 'xxx'

错误原因：在打包或编译时找不到指定的模块。
解决方案：

• 确认模块是否已安装：npm install xxx
• 检查导入路径是否正确：import MyComponent from './components/MyComponent';
• 检查 package.json 中的依赖配置

9. TypeError: this is undefined

错误原因：在类方法或回调函数中，this 指向意外对象。
示例代码：

class MyClass {  constructor() {    this.name = "MyClass";  }  greet() {    setTimeout(function() {      console.log(this.name); // this 指向 window 而非 MyClass 实例    }, 1000);  }}

解决方案：

• 使用箭头函数保留上下文：setTimeout(() => { ... }, 1000)
• 手动绑定 this：this.greet = this.greet.bind(this)

10. DOMException: Failed to execute 'appendChild' on 'Node'

错误原因：尝试将无效的节点添加到 DOM 中（如 null 或重复添加同一节点）。
解决方案：

• 确保节点已正确创建：const element = document.createElement('div');
• 避免重复添加：if (!parent.contains(child)) { parent.appendChild(child); }

总结建议

1. 善用调试工具：Chrome DevTools 的断点调试、错误堆栈追踪。
2. 阅读错误信息：错误提示中的行号、文件名和上下文很关键。
3. 逐步排查：缩小问题范围，隔离出错代码。