useEffect 中缺少依赖项

Question

我知道这个问题已经被问了很多，我知道我可以使用 eslint 覆盖来禁用它。我知道如果你在 useEffect 中定义了这个函数，你就不会遇到这个问题，而且我知道如果我在组件中有 func，我可以将它包装在 useCallback 中。

但就我而言，调度来自某些上下文。

所以这是代码：

const { store, dispatch } = useContext(SomeContext);

useEffect(() => {
   const processed = processData(store.data);
   dispatch.setProcessedData(processed);
}, [store.data]);

如果我在依赖项数组中添加“dispatch”，它就会进入循环，我猜想会导致dispatch在每次重新渲染时被销毁和创建。有什么办法可以解决吗

Answer 1

是的，你是对的。将调度添加到依赖项数组可能会导致无限循环，因为它在每次渲染时都会发生变化，从而导致 useEffect 重复运行。

为了解决这个问题，您可以使用

useCallback

钩子来记忆调度函数，以便它在渲染之间保持相同。

以下是如何修改代码的示例：

import React, { useContext, useEffect, useCallback } from 'react';

const YourComponent = () => {
  const { store, dispatch } = useContext(SomeContext);

  const memoizedDispatch = useCallback(dispatch, []); // Memoize the dispatch function

  useEffect(() => {
    const processed = processData(store.data);
    memoizedDispatch.setProcessedData(processed);
  }, [store.data, memoizedDispatch]);

};