javascript - 使用依赖多个 Prop 的useEffect跟踪一个 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已更改。处理此案的正确方法是什么？

最佳答案

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

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

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

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