2

我希望有一个人可以帮助我。我试图找到我的问题的答案，但我找不到，所以如果它在那里并且我找不到它，我提前道歉。

所以，我有一个昂贵的操作，它依赖于存储在 redux 存储中的 3 个对象。由于它很昂贵，我只想在这 3 个对象中的任何一个发生更改时才执行它。

为了避免使 useMemo 执行的函数过于复杂，我将其拆分为较小的函数，然后在需要时调用，如下所示：

const computedValue = useMemo(() => {
  ...
  const result = processStoreObject1(storeObject1)
  ...
}, [storeObject1, storeObject2, storeObject3, processStoreObject1])

现在，我不想将 processStoreObject1 列为 useMemo 的依赖项，计算值不依赖于它，计算值仅依赖于 3 存储对象。但是，如果我没有将该函数列为 useMemo 的依赖项，则会收到以下 lint 警告：

“React Hook useMemo 缺少依赖项：'processStoreObject1'。要么包含它，要么删除依赖项数组。eslint(react-hooks/exhaustive-deps)”

由于这个警告，我必须将函数包含在依赖数组中，并且因为函数是在组件内部声明的，类似于：

const MyComponent = () => {
  ...
  const processStoreObject1 = () => {
    // Do something
  }
  ...
}

我必须将它包装在 useCallback 中，否则它会随着每次渲染而变化，并且 useMemo 一直在重新计算（这是错误的）。如果我不使用 useCallback 包装 processStoreObject1，我得到的警告是：

“'processStoreObject1' 函数使 useMemo Hook 的依赖关系（在 NNN 行）在每次渲染时都会发生变化。要解决这个问题，请将 'processStoreObject1' 定义包装到它自己的 useCallback() Hook.eslint(react-hooks/exhaustive-deps) "

我知道一个简单的解决方案是在组件外部定义 processStoreObject1 ，这样它就不会在每个渲染中创建，但我不喜欢这种方式，该函数只在组件内部使用，所以我想在那里定义。

总而言之，问题是，如何在不将依赖项添加到依赖项数组的情况下，在 useMemo 执行的函数中使用函数。我知道这是可行的，我看到了一些没有在依赖项数组中使用的函数示例。

如果有人可以帮助我，我将不胜感激。

谢谢 ！

4

0 回答 0