如何在Next.js中让useEffect精准控制组件更新？

问题根源分析 #

1. 第一段代码组件不更新的原因：直接修改data数组中的元素属于直接篡改状态（mutating state），React的useState通过引用比较判断状态是否变化。直接修改数组元素不会改变数组本身的引用，因此组件不会触发重新渲染。
2. 第二段代码无限循环的原因：每次fetch返回的res.data是一个新的数组对象（引用不同），调用setData(res.data)后data的引用改变，触发useEffect再次执行，进而再次发起请求、更新状态，形成无限循环。

正确实现方式 #

1. 修改data时，通过创建新引用更新状态 #

要让组件感知到状态变化，必须通过setData传入一个新的数组/对象引用，而不是修改原状态。示例：

// 错误写法：直接修改原数组
// data[0].name = "Updated Name";
// setData(data); // 引用未变，组件不更新

// 正确写法：创建新数组和对象
setData(prevData => {
  return prevData.map(item => {
    if (item.id === targetId) { // 定位要修改的项
      return {...item, name: "Updated Name"}; // 浅拷贝对象并修改属性
    }
    return item;
  });
});

这种方式会生成新的数组引用，React检测到状态变化后会自动重新渲染组件。

2. 合理设置useEffect的依赖 #

如果只需要初始化加载一次数据，保持空依赖数组[]即可，这是符合React规范的写法：

const [data, setData] = useState([]);

useEffect(() => {
  fetch("/api/data")
    .then(res => res.json())
    .then(res => setData(res.data))
    .catch(err => console.error(err));
}, []); // 空依赖：仅组件挂载时执行一次

此时只要通过上述正确方式修改data，组件会正常更新，不需要再次触发fetch。

如果需要在特定条件变化时重新获取数据（比如切换筛选条件），应该依赖那个特定条件，而非data本身：

const [filter, setFilter] = useState("all");
const [data, setData] = useState([]);

useEffect(() => {
  fetch(`/api/data?filter=${filter}`)
    .then(res => res.json())
    .then(res => setData(res.data))
    .catch(err => console.error(err));
}, [filter]); // 仅filter变化时重新请求数据

3. 关于依赖提示的问题 #

ESLint的react-hooks/exhaustive-deps规则会检查useEffect内部用到的变量是否在依赖数组中。你的第一段代码中，useEffect内部没有使用data，因此空依赖是合规的，不会触发提示；如果其他useEffect有提示，说明那些useEffect内部用到了未声明在依赖数组中的变量。

内容的提问来源于stack exchange，提问作者miguel morillo