时间戳

首页 > 解决方案 > 如何正确地将参数传递给 useCallback() 钩子？

reactjs - 如何正确地将参数传递给 useCallback() 钩子？

问题描述

控制台警告“<strong>React Hook useEffect 缺少依赖项：'animate'。包括它或删除依赖数组。"

如果 animate 函数设置在括号中

return () => {cancelAnimationFrame (refAnimation.current)}}, [animate])

它给出了另一个警告“ 'animate' 函数使 useEffect Hook 的依赖关系在每次渲染时都会发生变化。要解决此问题，请将 'animate' 的定义包装在它自己的 useCallback () Hook 中。 ”

我尝试将函数包装在useCacllback 钩子中，但显然我做错了，我得到了一个错误：

React Hook useCallback 在只用一个参数调用时什么都不做。您是否忘记传递一系列依赖项？

const animate = useCallback(() => {
   refAnimation.current = requestAnimationFrame(() =>
   animate(cur, rez, speed)
);
   cur = cur + speed;
   ref.current.style.marginLeft = cur.toFixed(2) + "px";

   if (Math.round(cur) === rez) {
   cancelAnimationFrame(refAnimation.current);
}

});

我不知道如何正确地将参数传递给useCallback()以将它们进一步传递给animate()？

完整版代码 https://codesandbox.io/s/old-frog-6nwfq?file=/src/scroll.js

  let ref = useRef();
  let refAnimation = useRef();

  ...

  const animate = (cur, rez, speed) => {
    refAnimation.current = requestAnimationFrame(() =>
      animate(cur, rez, speed)
    );
    cur = cur + speed;
    ref.current.style.marginLeft = cur.toFixed(2) + "px";
    if (Math.round(cur) === rez) {
      cancelAnimationFrame(refAnimation.current);
    }
  };


  useEffect(() => {
    if (ref.current === true) {
      refAnimation.current = requestAnimationFrame(() => animate(0, 0, 0));
    }
    return () => {
      cancelAnimationFrame(refAnimation.current);
    };
  }, [animate]);

标签： reactjs

解决方案

当您使用时，useCallback您正在根据一些参数记住该回调。这里你没有指定任何参数。如果不是这种情况，它应该只创建一次（而不是根据其他一些值/状态的变化重新创建），你必须将一个空数组作为第二个参数传递给useCallback. 当组件挂载时，它会导致此回调仅创建一次。
看看文档：https ://reactjs.org/docs/hooks-reference.html#usecallback

推荐阅读