0Pricing
React Academy · 课时

调试常见 React 错误

诊断缺少 key 的警告、未定义状态错误和水合错误。

调试常见 React 错误 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将诊断最常见的 React 错误：缺少键警告、未定义状态错误、重新渲染次数过多以及水合不匹配。

缺少键警告

React 会记录：*列表中的每个子项都应具有唯一的“key”属性。* 当您渲染数组却没有添加 `key` 属性时，就会发生这种情况。请为每个列表项添加稳定且唯一的键来修复它。
// Bad
items.map(item => <li>{item.name}</li>)

// Good
items.map(item => <li key={item.id}>{item.name}</li>)

无法读取未定义值的属性

此崩溃通常表示您的状态在首次渲染时是 `undefined`。请始终使用安全的默认值初始化状态（数组使用 `[]`，对象使用 `{}`，使用前需要检查的值使用 `null`）。
// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;

// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;

重新渲染次数过多错误

当组件进入无限渲染循环时，React 会抛出 *重新渲染次数过多* 错误——通常是因为您在渲染期间无条件调用了 `setState`，或直接将内联的 `() => setState(...)` 作为属性传入，并导致它在每次渲染时触发。
// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

修复重新渲染次数过多问题

请将状态更新移入事件处理程序或 useEffect。绝不要在组件主体的顶层直接调用 setState。
// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

水合不匹配警告

在 SSR 应用中，React 会警告：*水合失败，因为初始界面与服务器渲染的内容不匹配。* 常见原因包括在渲染中使用 `Date.now()` 或 `Math.random()`，以及浏览器扩展注入 HTML。

修复水合不匹配

请将动态值（时间戳、随机 ID）移入在 `useEffect` 内初始化的 `useState`，这样服务器始终渲染静态值，而客户端会在挂载后进行更新。
const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

状态不会立即更新

请记住，`setState` 是异步的。在调用它后立即记录状态，显示的是旧值。若要查看更新后的值，请在依赖状态变量的 `useEffect` 中记录状态。
const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still old value!
}

useEffect(() => {
  console.log('updated:', count); // correct
}, [count]);

属性变化时组件不会更新

如果属性发生变化时组件没有更新，请检查您是否在原处修改了对象或数组。React 使用引用相等性进行判断——修改已有对象不会触发重新渲染。
// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

// Good — new array reference
setList([...list, 'item']);

阅读错误覆盖层中的错误

React 应用在开发环境中崩溃时，浏览器中会出现错误覆盖层。请阅读底部的 **组件堆栈**——它会显示渲染出发生错误组件的每个组件，从而明确指出错误来源。

快速检查

React 出现“重新渲染次数过多”错误最常见的原因是什么？

回顾

现在您已经可以修复最常见的 React 错误：为列表添加稳定的键、安全地初始化状态、避免在渲染中调用 setState、处理水合不匹配，并阅读错误覆盖层中的组件堆栈。

课程完成

恭喜您！您已完成 **React DevTools 与调试**。现在您可以安装 DevTools、检查组件树和状态、分析渲染性能，并诊断最常见的 React 运行时错误。

常见问题解答

「调试常见 React 错误」课时是免费的吗？

是的 — 「调试常见 React 错误」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「调试常见 React 错误」这节课中我会学到什么？

诊断缺少 key 的警告、未定义状态错误和水合错误。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「调试常见 React 错误」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 安装并打开 React DevTools
  2. 检查组件树与 Props
  3. 使用 Profiler 标签页
  4. 调试常见 React 错误
← 返回 React Academy