React useEffect依赖缺失问题：如何避免无限循环且不禁用ESLint？

这里有几种不用全局禁用ESLint的解决思路：

1. 将过滤逻辑移至Redux Action内部 #

既然最终要更新Redux中的reduxArray，不如把过滤逻辑放到Redux的异步Action（或Thunk）里，让Action自己获取当前状态并处理过滤，组件只负责传递data参数：

Action 代码示例： #

// 假设使用Redux Thunk
const updateFilteredReduxArray = (data) => (dispatch, getState) => {
  // 从Redux获取当前最新的reduxArray
  const currentReduxArray = getState().yourSlice.reduxArray;
  // 执行过滤逻辑
  const filteredData = currentReduxArray.filter(item => {
    // 这里用传入的data做判断，比如 item.value === data
    return /* 你的过滤条件 */;
  });
  // 分发更新Action
  dispatch(method({ reduxArray: [...filteredData] }));
};

组件中使用： #

useEffect(() => {
  store.dispatch(updateFilteredReduxArray(data));
}, [data]);

这种方式下，组件的useEffect只依赖data，完全不需要引用reduxArray，从根源上避免了无限循环和ESLint报错，也符合Redux将状态逻辑集中管理的设计思想。

2. 使用useRef保存Redux状态的最新值 #

通过useRef在每次组件渲染时同步reduxArray的最新值，这样useEffect里可以访问最新状态，但不需要将其加入依赖数组：

const reduxArray = useSelector(state => state.yourSlice.reduxArray);
const reduxArrayRef = useRef(reduxArray);

// 同步reduxArray的最新值到ref
useEffect(() => {
  reduxArrayRef.current = reduxArray;
}, [reduxArray]);

// 只依赖data的useEffect
useEffect(() => {
  const filteredData = reduxArrayRef.current.filter(item => {
    // 你的过滤逻辑
    return /* 条件 */;
  });
  store.dispatch(method({ reduxArray: [...filteredData] }));
}, [data]);

这里第二个useEffect只会在data变化时触发，reduxArray的更新只会同步到ref，不会触发这个useEffect，因此不会产生无限循环，同时ESLint也不会报错。

3. 针对单个useEffect忽略ESLint检查 #

如果上面两种方式都不适合，可以只对当前useEffect添加ESLint忽略注释，而非全局禁用规则：

useEffect(() => {
  const filteredData = reduxArray.filter(
    () => // do something
  );
  store.dispatch(method({ reduxArray: [...filteredData] }));
}, [data]); // eslint-disable-line react-hooks/exhaustive-deps

这种方式比较简单直接，适合临时场景，但推荐优先使用前两种更规范的方案。

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