如何修复 TypeScript React 和 Redux 代码中由调度函数引起的无限循环？

Question

我已经使用 TypeScript 编写了一些 React 代码，这些代码利用了 useCallback 挂钩和来自 Redux 的调度功能。不幸的是，代码导致了无限循环，我不确定如何修复它。

这是我的代码：

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,
      })
    );
  },
  [editedElement?.hierarchyScopeId]
);

通话：

{data && editedElement && (
  <DropdownHierarchy
    onSelect={(event) => {
      onSelect(event, "hierarchyScopeId");
    }}
    search
    configuration={{
      data,
      selectedElementsIds: [
        editedElement.hierarchyScopeId,
      ],
    }}
  />
)}

DropdownHierarchy 是外部组件，我无法编辑它。

当我调用传递给 DropdownHierarchy 组件的 onSelect 函数时，代码陷入无限循环并一直调用 onSelect 并重新呈现。似乎问题来自使用调度功能，但我不确定如何解决它。

有人可以帮我诊断这个问题并提出修复建议吗？

Answer 1

来自React 文档 useCallback：

dependencies

：在 fn 代码中引用的所有反应值的列表。响应式值包括 props、state 以及直接在组件主体内声明的所有变量和函数。如果你的 linter 是为 React 配置的，它将验证每个反应值是否正确指定为依赖项。依赖项列表必须具有固定数量的项，并且像 [dep1, dep2, dep3] 一样内联编写。 React 将使用 Object.is 比较算法将每个依赖项与其先前的值进行比较。

根据此信息，您的依赖项列表缺少值。

此外，无限循环通常是由 useEffect 或 useCallback 函数中缺少条件语句引起的。考虑是否应该添加条件语句来确定是否应该调用

dispatch

函数。