reactjs - 如何在不违反 Hooks 规则的情况下重构这个 React.js 代码？

Question

在我的 React 应用程序中，我有一个myFunc2()调用React.useContext().

在我的函数组件（名为myFunc1()）中，我执行以下操作：

const runMyFunc2 = myFunc2()
runMyFunc2(args1)
runMyFunc2(args2)

现在我想实现对这两个连续调用的去抖动runMyFunc2()。所以我创建了一个新函数myFunc3()，myFunc1()看起来像这样：

const runMyFunc2 = myFunc2()

function myFunc3(): void {
  console.log('inside myFunc3!')
  runMyFunc2(args1)
  runMyFunc2(args2)
} 

myFunc1()我用一个对 的调用替换了上面显示的三行myFunc3()，以便我可以将它们包装在对 的调用中debounce()。

然而，只需执行上述重构——甚至不调用debounce()——就会在浏览器中产生这个错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

如何重构这两个调用，runMyFunc2()以便在不违反Hooks 规则的情况下对它们进行去抖动？

标签： reactjsreact-hooks