如何避免React中预设选择触发的setState调用引发关联useEffect钩子

方案1：通过深比较判断是否匹配预设 #

核心逻辑：只有当当前filters和所有预设都不匹配时，才把currentPreset重置为"Custom"（空字符串）。选择预设时，filters会和对应预设完全一致，此时就不会触发重置操作。

注意：因为filters是复杂对象，不能直接用===做对比，需要用深比较。可以用lodash.isEqual这类工具函数，也可以自己实现简单的深比较逻辑。

修改后的useEffect代码：

import { isEqual } from 'lodash'; // 若使用lodash

useEffect(() => {
  // 检查当前filters是否匹配某个预设
  const matchedPreset = Object.keys(FILTER_PRESETS).find(preset => 
    isEqual(FILTER_PRESETS[preset], filters)
  );
  
  // 仅当无匹配预设时，重置为Custom
  if (!matchedPreset) {
    setCurrentPreset('');
  }
}, [filters]);

如果不想引入第三方库，可自行实现简单深比较（适合结构不复杂的对象）：

function deepEqual(a: any, b: any): boolean {
  if (a === b) return true;
  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false;
  
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  
  if (keysA.length !== keysB.length) return false;
  
  for (const key of keysA) {
    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
  }
  
  return true;
}

方案2：用useReducer统一管理状态（更推荐） #

把filters和currentPreset的状态合并，通过useReducer区分「预设触发的更新」和「用户手动修改的更新」，从根源上避免依赖冲突。

首先定义Reducer和Action类型：

type FilterState = {
  filters: typeof FILTER_PRESETS[string];
  currentPreset: string;
};

type FilterAction = 
  | { type: 'SET_PRESET'; payload: string }
  | { type: 'UPDATE_FILTERS'; payload: typeof FILTER_PRESETS[string] };

function filterReducer(state: FilterState, action: FilterAction): FilterState {
  switch (action.type) {
    case 'SET_PRESET':
      return {
        currentPreset: action.payload,
        filters: action.payload ? FILTER_PRESETS[action.payload] : state.filters,
      };
    case 'UPDATE_FILTERS':
      return {
        currentPreset: '', // 手动修改时直接设为Custom
        filters: action.payload,
      };
    default:
      return state;
  }
}

然后在组件中使用：

const [state, dispatch] = useReducer(filterReducer, {
  filters: initialFilters, // 你的初始筛选器值
  currentPreset: '',
});

// 选择预设的函数
function set_preset(preset: string) {
  dispatch({ type: 'SET_PRESET', payload: preset });
}

// 用户手动修改表单时调用的函数
function handleFilterChange(newFilters: typeof FILTER_PRESETS[string]) {
  dispatch({ type: 'UPDATE_FILTERS', payload: newFilters });
}

这种方式逻辑更清晰，所有状态更新都通过Reducer统一处理，避免了useEffect的依赖冲突，也更易维护。

方案3：用useRef标记更新来源（快速修复备选） #

如果不想大幅改动现有代码，可用useRef临时标记是否为预设触发的更新，比外部布尔变量更优雅：

const isPresetUpdate = useRef(false);

function set_preset(preset: string) {
  isPresetUpdate.current = true; // 标记是预设更新
  setCurrentPreset(preset);
  if (preset) {
    setFilters(FILTER_PRESETS[preset]);
  }
}

useEffect(() => {
  if (isPresetUpdate.current) {
    isPresetUpdate.current = false; // 重置标记
    return;
  }
  setCurrentPreset('');
}, [filters]);

这个方案改动最小，适合快速修复现有代码的场景。

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