如何修复TypeScript React+Redux中dispatch引发的无限循环？

核心问题分析 #

无限循环的根源是组件重复渲染→触发回调→更新状态→再次触发组件渲染的闭环，具体原因如下：

• useCallback依赖不完整：回调中使用了完整的editedElement构造新状态，但依赖数组仅包含editedElement?.hierarchyScopeId，导致回调逻辑可能捕获旧状态，且状态更新后回调的创建时机不符合预期。
• 内联回调与动态对象导致props频繁变化：传给DropdownHierarchy的onSelect是内联函数，configuration是每次渲染都会新建的对象，这两个props的引用每次都会变化，触发外部组件重复渲染。
• 外部组件的触发逻辑：DropdownHierarchy在props变化重新渲染时，内部可能会自动调用onSelect回调（比如同步选中状态），进而触发dispatch更新状态，形成循环。

分步修复 #

1. 修正useCallback的依赖数组

确保回调依赖包含所有用到的变量，Redux的dispatch是稳定引用，不会触发不必要的回调重建：

const onSelect = useCallback(
  (
    event: React.SyntheticEvent<HTMLDivElement, Event>,
    property: keyof OperationsDefinition
  ) => {
    const customEvent = event as unknown as CustomEvent;
    const options = customEvent.detail.options;
    const value = options.length ? options[0].id : "";

    dispatch(
      setEditedElement({
        ...(editedElement as Element),
        [property]: value,
      })
    );
  },
  [dispatch, editedElement] // 补充完整依赖
);

2. 预绑定回调参数，避免内联函数

用useCallback预先创建绑定好hierarchyScopeId的回调，保证引用稳定：

const handleHierarchySelect = useCallback(
  (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    onSelect(event, "hierarchyScopeId");
  },
  [onSelect]
);

调用时直接传入这个稳定的回调：

<DropdownHierarchy
  onSelect={handleHierarchySelect}
  search
  configuration={configuration}
/>

3. 用useMemo缓存configuration对象

避免每次渲染新建对象导致props变化：

const configuration = useMemo(() => ({
  data,
  selectedElementsIds: [editedElement.hierarchyScopeId],
}), [data, editedElement.hierarchyScopeId]);

4. 可选：添加状态更新判断，减少无意义dispatch

在dispatch前判断新值是否与当前值一致，避免不必要的状态更新：

const onSelect = useCallback(
  (
    event: React.SyntheticEvent<HTMLDivElement, Event>,
    property: keyof OperationsDefinition
  ) => {
    const customEvent = event as unknown as CustomEvent;
    const options = customEvent.detail.options;
    const value = options.length ? options[0].id : "";

    if ((editedElement as Element)[property] !== value) {
      dispatch(
        setEditedElement({
          ...(editedElement as Element),
          [property]: value,
        })
      );
    }
  },
  [dispatch, editedElement]
);

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