使用useEffect仅在弹窗关闭时触发请求报依赖缺失警告如何解决？

方案1：增加状态切换判断（最推荐，符合Hook规则） #

你只需要在原有全量依赖的useEffect里，增加「只有visible从开启切换为关闭时才执行」的逻辑即可，既不会有警告，也不会出现min/max变化时误触发的问题：

// 存储上一次的visible状态
const prevVisibleRef = useRef(visible);

useEffect(() => {
  // 仅当visible从true变为false（弹窗关闭的瞬间）才触发搜索
  if (prevVisibleRef.current && !visible) {
    search({
      start: min,
      end: max
    })
  }
  // 更新上一次的visible状态
  prevVisibleRef.current = visible;
// 所有用到的变量全部加入依赖数组，符合Hook规则
}, [visible, search, min, max]);

这个方案的逻辑非常直观：就算min、max、search发生变化，只要visible没有出现从开到关的切换，就不会执行搜索逻辑，完全匹配你的需求。

方案2：用ref存储最新值（适合依赖频繁变动的场景） #

如果你不想把min、max加入依赖数组，可以用ref存储它们的最新值，useEffect只需要监听visible变化即可：

// 定义ref同步最新的变量值
const minRef = useRef(min);
const maxRef = useRef(max);
const searchRef = useRef(search);

// 变量更新时同步到ref
useEffect(() => {
  minRef.current = min;
  maxRef.current = max;
  searchRef.current = search;
}, [min, max, search]);

// 仅监听visible变化，关闭时取ref里的最新值触发搜索
useEffect(() => {
  if (!visible) {
    searchRef.current({
      start: minRef.current,
      end: maxRef.current
    })
  }
}, [visible]);

1. 初始写法没有把用到的min、max、search加入依赖数组，React会认为你可能拿到旧的变量值，因此抛出依赖警告。如果强行忽略警告，实际运行中有可能出现搜索参数不是最新值的bug。
2. 后来的useCallback写法没有传入第二个依赖数组参数，所以触发了useCallback的参数错误警告；就算补全依赖数组，min/max变化时会导致useCallback返回的函数引用变化，依然会触发后续的useEffect执行，不符合需求。

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