结合Redux Thunk使用useEffect时依赖数组的正确处理方案

问题复现 #

你当前的实现代码如下：

Actions.js 异步请求定义 #

export const fetchInventory = (user_id) => {
return (dispatch) => {
    dispatch(fetchInventoryData());
    fetch("url", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },

      body: JSON.stringify({ user_id }),
    })
      .then((res) => res.json())
      .then((res) => {
        saveInventory(res);
        dispatch(fetchInventorySuccess(res));
      })
      .catch((err) => dispatch(fetchInventoryFailure(err)));
  };
};

Container.js useEffect 现有实现 #

useEffect(() => {
  if (inventory.inventoryData.length > 0) return;
  else if (user_id) fetchInventory(user_id);
  else return [];
}, [user_id]);

警告触发原因 #

ESLint 的 react-hooks/exhaustive-deps 规则会强制检查 useEffect 内部用到的所有外部变量，你当前的 effect 用到了 inventory、fetchInventory 两个变量但没有加入依赖数组，因此触发警告。

最优配置方案 #

第一步：稳定 fetchInventory 的引用 #

容器组件中触发 thunk action 的函数默认每次渲染都会生成新的引用，直接加入依赖数组会导致 effect 不必要的重复执行。使用 useCallback 包裹触发函数，依赖仅设置为 useDispatch 返回的 dispatch 实例（react-redux 保证 dispatch 实例全局稳定，不会随组件渲染更新）：

import { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { fetchInventory as fetchInventoryAction } from './Actions'

// 组件内部代码
const dispatch = useDispatch()
const fetchInventory = useCallback((user_id) => {
  dispatch(fetchInventoryAction(user_id))
}, [dispatch])

第二步：用 useRef 同步 inventory 状态，避免依赖循环 #

如果直接将 inventory 加入依赖数组，存在无限循环风险：若接口返回的 inventoryData 是空数组，就会触发「请求→inventory 更新→effect 重新执行→再次请求」的死循环。
可以用 useRef 存储 inventory 的最新值，单独编写一个轻量 effect 同步 ref 与状态，无需将 inventory 加入业务请求的依赖数组：

import { useRef, useEffect } from 'react'

// 组件内部代码
const inventoryRef = useRef(inventory)
// 同步 inventory 最新值到 ref，仅 inventory 变化时执行
useEffect(() => {
  inventoryRef.current = inventory
}, [inventory])

// 业务请求 effect
useEffect(() => {
  if (inventoryRef.current.inventoryData.length > 0) return;
  if (user_id) fetchInventory(user_id);
}, [user_id, fetchInventory])

方案原理 #

• useCallback 包裹后的 fetchInventory 引用固定，加入依赖数组不会触发 effect 不必要执行
• useRef 的 current 属性是可变值，不需要加入 useEffect 依赖数组，既可以拿到 inventory 的最新值，又不会触发循环执行
• 仅当 user_id 变化时才会重新执行请求逻辑，符合「前置请求拿到 user_id 后再拉取 inventory」的需求

临时可选方案（不推荐长期使用） #

如果能100%确认现有逻辑不存在闭包问题、也不会出现无限循环，可以临时禁用 ESLint 规则：

useEffect(() => {
  if (inventory.inventoryData.length > 0) return;
  else if (user_id) fetchInventory(user_id);
  else return [];
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user_id]);

该方案仅适合临时调试，长期维护容易因为后续逻辑修改触发闭包陷阱，导致隐性bug。

内容的提问来源于stack exchange，提问作者Seymur Mammadov