React 中 useEffect 依赖项遗漏导致的异步数据错误

前言

作为一名前端开发者，我经常在使用 React 的 useEffect 钩子时遇到一些难以察觉的问题。最近，在一个项目中遇到了一个奇怪的数据加载问题，经过长时间排查后才发现是由于依赖项遗漏导致的。这篇文章将详细记录这个问题的发现、分析和最终解决过程。

问题现象

在开发一个用户管理页面时，我需要根据用户 ID 加载对应的信息。我的逻辑是：当用户 ID 改变时，发起一次异步请求获取数据，并更新页面内容。然而，我发现每次切换用户 ID 后，页面上的数据并没有正确更新，而是保持了之前的状态。

起初我以为是 API 接口的问题，或者可能是网络请求没有成功。但当我检查控制台时，发现请求确实是发送了，而且返回的数据也正确。这就让我感到非常困惑——为什么数据没更新？

问题分析

我开始怀疑是不是组件没有重新渲染。于是我在 useEffect 中添加了 console.log 来观察执行情况。结果发现，虽然用户 ID 变化了，但 useEffect 并没有被触发。这说明依赖项可能没有正确设置。

接下来，我回顾了代码结构，发现 useEffect 的依赖项数组里只包含了空数组，也就是只在组件挂载时执行一次。这显然不对，因为用户 ID 是动态变化的，应该作为依赖项之一。

排查步骤

第一步：确认 useEffect 的依赖项是否正确

useEffect(() => {
  fetchData();
}, []); // 依赖项为空数组，只在首次渲染时执行

这个依赖项设置明显有问题，因为用户 ID 是变化的，应该包含在依赖项中。

第二步：尝试添加用户 ID 到依赖项中

useEffect(() => {
  fetchData();
}, [userId]); // 添加 userId 到依赖项中

这样设置之后，理论上当 userId 改变时，useEffect 应该会被重新调用