javascript - 跟踪更改对象的自定义钩子

Question

我在 React 中编写了一个自定义钩子（我称之为 useChanges），它有望跟踪更改的对象。它采用三个参数（更改对象的初始数组、对象的原始数组、选择器函数，该函数选择对象的属性，该属性在其他对象中具有唯一值）。

请参阅此处的工作示例：https ://codesandbox.io/s/compassionate-murdock-ey8zx

使用自定义钩子的方式是使用具有一个输入和一个文本区域（受控组件）的表单。每当用户输入输入或文本区域时，值都存储在状态中。此外，我对整个表单状态使用去抖动功能，并且每当去抖动表单值发生变化时，我都会在 useEffect 中运行一段代码。在这段代码中，我调用了自定义钩子提供的函数 applyChanges。

问题是当我将所有建议的依赖项包含到 useEffect 时。目前我在依赖数组中只有 debouncedValues 。但是 ESLint 告诉我还包括 getChangedItemAndOriginalItem 函数和 applyChanges 函数。如果我包含它们，则会导致无限循环，并且组件永远不会停止重新渲染。

我试图记住自定义钩子中的两个函数，但它没有帮助，因为 ESLint 规则抱怨自定义钩子中缺少依赖项。

有没有办法以某种方式更改我的代码，以便让 ESLint 满意？

标签： javascriptreactjsreact-hooks