请问如何用 hooks 实现一个定时保存的功能?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1034 天前的主题，其中的信息可能已经有所发展或是发生改变。

场景：用户在页面进行操作，每一分钟将用户的操作数据返给后端。

目前实现方式：util 文件写入一自动保存的 hooks ，接受‘保存函数 func()’为参数。hooks 内部用 useEffect 实现，依赖为空数组，进入页面产生一个定时器，60 秒调一次保存数据函数，且退出页面需要删除定时器。

export function useAutoSave(
  func: () => Promise<any>,
) {
  const timer = useRef<any>(-1);
  const d = duration || 60000;
  
  useEffect(() => {
    timer.current = setInterval(async () => {
     
        await func();
        showMessage(t("results saved automatically"));
    }, d);

    return () => {
      clearInterval(timer.current);
    };
  }, []);
}

场景复现情况：每 60 秒调一次保存函数。问题：func 函数内部会将用户数据 result 传递给后端，但目前传递的都是空值。猜想是 result 没有做为 useEffect 的依赖，但如果放进 useEffect 依赖中肯定逻辑又不对了。

不知道该如何修改，求大家赐教。

useeffect

func

函数

hooks

4 条回复 • 2022-02-22 18:42:00 +08:00

erwin985211

2022-02-22 17:18:03 +08:00

result 放入依赖为什么不对，存的不就是 result 吗

HariopaNic

2022-02-22 17:45:49 +08:00

@erwin985211 那不会 result 改变一次就产生一个定时器么

wenzichel

2022-02-22 17:55:37 +08:00

result 变量是在 func 函数里吗？ result 是用 useState 声明的吗？如果是，那么这就是一个闭包的问题，setInterval 引用的永远第一次渲染时的值。

那么如何实现一个 setInterval 的 hook ，可以参考这篇文章 [ https://www.xiabingbao.com/post/react/self-react-hooks.html#2.2+%E5%AE%9A%E6%97%B6%E5%99%A8+useInterval ] 。func 要放在 useRef 里，每次调用，都用最新的赋值。

HariopaNic

2022-02-22 18:42:00 +08:00

@wenzichel 问题解决了非常感谢！