reactjs - React hook 等待上一个调用完成

Question

我正在开发一个使用钩子(Hook)的 React 项目。我被分配了一个任务

"更改 useInterval Hook ，或创建一个新 Hook (usePoll？)。这应该与 useInterval 操作相同，但应该等到 ajax 请求在启动计时器之前完成”。

我是 React Hooks 的新手，正在为此寻找解决方案但找不到。当前的useInterval函数如下。

import React, { useEffect, useRef } from 'react';

export function useInterval(callback, delay, immediate = true) {
    const savedCallback = useRef();

    // Remember the latest callback.
    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
        function tick() {
            savedCallback.current();
        }
        if (delay !== null) {
            if (immediate) {
                tick();
            }

            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
}

在程序中的使用如下。

useInterval(() => {
        get(`/api/v1/streams/1`).then(({ data: { data } }) => {
            setStream(data);
        });
    }, 5000);

我需要更改 useInterval 函数以等待 ajax 请求完成后再启动计时器。如果有人可以帮助我，那就太好了。谢谢

Answer 1

试一试。它需要在 then 中调用 next 函数，但它应该接近您要查找的内容。

function useInterval(handler, delay, immediate = true) {
  React.useEffect(() => {
    let interval

    const start = () => {
      clearInterval(interval)
      interval = setInterval(() => handler(start), delay)
    }

    handler(start)

    return () => clearInterval(interval)
  }, [])
}

用法:

useInterval((next) => {
    get('/api/v1/streams/1').then(data => {
        // tell the timer to begin
        next()
    })
}, 5000)