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

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

控制台警告“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,speed) => {
    refAnimation.current = requestAnimationFrame(() =>
      animate(cur,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));
    }
    return () => {
      cancelAnimationFrame(refAnimation.current);
    };
  },[animate]);

解决方法

当您使用 useCallback 时，您会根据某些参数记住该回调。这里你没有指定任何参数。如果不是这种情况并且它应该只创建一次（并且不能根据其他值/状态的更改重新创建），则必须将一个空数组作为第二个参数传递给 useCallback。当组件挂载时，它会导致此回调仅创建一次。
查看文档：{​​{3}}