时间戳

首页 > 解决方案 > 使用 useEffect 跟踪一个 prop，它依赖于多个 prop

javascript - 使用 useEffect 跟踪一个 prop，它依赖于多个 prop

问题描述

有一个看起来像这样的代码：

const MyComponent: React.FC<MyComponentProps> = ({
    trackMyChanges,
    iChangeEverySecond
}) => 
{
    // React Hook useEffect has missing dependencies: 'iChangeEverySecond'
    useEffect(() => {
        calculateData(trackMyChanges, iChangeEverySecond);
    }, [trackMyChanges]);   
    
    return <> ... </>;
}

calculateData如果trackMyChanges道具已更改，代码将执行。它工作正常，但我收到一个警告，提示iChangeEverySecond缺少依赖项。不过，我不希望钩子运行，因为iChangeEverySecond已经更改。处理这种情况的正确方法是什么？

标签： javascriptreactjstypescriptreact-hooks

解决方案

您可以使用 useCallback 挂钩来解决此问题：

const calculateData = useCallback(() => {
  console.log(iChangeEverySecond);
}, [iChangeEverySecond]);

useEffect(() => {
  calculateData(trackMyChanges);
}, [trackMyChanges, calculateData]);

因此，每次您的 iChangeEverySecond 更改时，它都会将您的 calculateData 函数重新定义为它的最新版本，但它只会在 trackMyChanges 更改时触发。

推荐阅读